Kendo: Récupérer liste triée à partir du stockage local

Question

J'ai des problèmes avec le rendu HTML à partir du stockage local en utilisant le <script type="text/x-kendo-template"

Fondamentalement, j'utilise la liste kendo sortable pour permettre à un utilisateur de modifier l'ordre d'une liste d'articles s'ils le souhaitent . Cette liste est remplie à partir d'Umbraco, donc le contenu peut varier. Donc, ce que j'ai, c'est que si un utilisateur arrive sur le site Web pour la première fois, il n'y aura pas d'entrées dans le stockage local, donc la liste sera affichée dans son ordre par défaut (l'ordre dans lequel les données sont stockées Umbraco).

Si un utilisateur modifie la commande, il déclenche un événement et enregistre la 'nouvelle' liste dans le stockage local et la liste doit être rendue de nouveau sur la page dans cet ordre. À partir de ce moment-là, l'ordre sera basé sur ce qui est dans le stockage local, à moins qu'il ne soit effacé.

Je suis arrivé au point où par l'ordre des éléments est stocké dans le stockage local, mais j'ai de la difficulté à ré-afficher cette liste sur la page.

Je suis sûr que c'est quelque chose d'évident mais je ne peux plus voir le bois pour les arbres.

Merci, H.

exemple:

 var items = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>(DictionaryAliases.ITEMS); 
     if (items != null && items .Any()) 
     { 
      <div id="maincontent"> 

    <script id="tmp" type="text/x-kendo-template"> 
     <div id="sortable" class="widget"> 
       #= data# 
     </div> 
    </script> 


      @{foreach (var i in items) 
      { 
        var tileTitle = i.GetPropertyValue<string> DictionaryAliases.ITEMS_NAME, String.Empty); 
        @displayItmes(i); 
      } 
      } 
      </div> 
     } 



@(Html.Kendo().Sortable() 
      .For("#maincontent") 
      .Cursor("url('" + Url.Content("~/content/web/sortable/grabbing.cur") + "'), default") 
      .HintHandler("hint") 
      .PlaceholderHandler("placeholder") 
      .Events(events => events 
       .Change("onChange")) 
     ) 

........................ 

     @helper displayItems(IPublishedContent Section) 
     { 

     var t = Section.GetPropertyValue<string>(title, String.Empty); 
     var i = Section.GetPropertyValue<string>(ICON, String.Empty); 
     int il= Section.GetPropertyValue<int>(ILINK, 0); 
     var iId = Section.GetPropertyValue(ICON, -1); 
     var url = strin.Empty; 
     url = Umbraco.NiceUrl(@il); 

     <div class="widget" id="sortable" header="@t" href="@url"> 
      @t 
      <div class="widget-image" header="@t" href="@url"> 
       <img src="@Umbraco.TypedMedia(iId).Url" 
        alt="=@Umbraco.TypedMedia(iId).Name" title="@t" header="@t" 
        href="@url" class="tile-icon"/> 
      </div> 
     </div> 
     } 

Voici le script:

<script> 
var localStorageSupport = (('localStorage' in window && window['localStorage'] !== null)); 
    var data; 
    var html; 

$(document).ready(function() 
{ 
    var matches = []; 
    var searchEles = document.getElementById("maincontent").children; 
    for (var i = 0; i < searchEles.length; i++) { 
     if (searchEles[i].id === 'sortable'){ 
       matches.push($(searchEles[i]).html()); 
     } 
    } 

if (localStorageSupport) { 
     data = JSON.parse(localStorage.getItem("sData")) || matches; 
    } else { 
     alert("your browser does not support local storage"); 
     data = matches; 
    } 

    html = kendo.render(kendo.template($("#tmp").html()), data); 
    $(".sortable").html(html); 

}) 

function onChange(e) { 
     if ((e.action === "receive") || (e.action === "sort")){ 
     var item = data.splice(e.oldIndex-1, 1)[0]; 
     data.splice(e.newIndex-1, 0, item); 
     localStorage.setItem("sData", kendo.stringify(data)); 
    }   
}; 

</script> 

Données d'échantillons de stockage local:

"\n   Driving test Doc\n   <div class=\"widget-image\" header=\"Driving test Doc\" href=\"file://C:\\Driving.pdf\">\n     <img src=\"/media/1031/test-manual.png\" alt=\"=test-manual.png\" title=\"Driving test Doc\" header=\"Driving test Doc\" href=\"file:///C:\\Driving.pdf\" class=\"t-icon\">\n   </div> 

\n ","\n   Car kit\n   <div class=\"widget-image\" header=\"Car kit\" href=\"http://0.0.0.0/index.xxx?id=xx\">\n     <img src=\"/media/1024/CatKit.png\" alt=\"=CarKit.png\" title=\"Equiom Toolkit\" header=\"Car kit\" href=\"http://0.0.0.0/index.xxx?id=xx\" class=\"t-icon\">\n   </div> 
\n "] 

Answer 1

Je suis maintenant capable de résoudre mon i ssue, merci aux gars de Telerik!

Voici une démo du code fourni pour résoudre ma question. http://dojo.telerik.com/ixono/7

Cheers, H