剑道：从本地存储

我有使用 <script type="text/x-kendo-template"

剑道：从本地存储

基本上从本地存储渲染HTML问题

检索排序列表，我使用的剑道排序列表，以允许用户重新排序项的列表，如果他们愿意的话。该列表由Umbraco填充，因此内容可能会有所不同。

所以我得到的是，如果用户第一次进入该网站，将不会有本地存储中的条目，因此该列表将以其默认顺序显示（数据存储的顺序一把umbraco）。

如果用户更改了订单，它会触发一个事件并将“新”列表顺序保存在本地存储中，并且该列表应按该顺序在页面上重新呈现。从这一点开始，订单将基于本地存储中的内容，除非它被清除。

我已经到了按项目的顺序存储在本地存储的地步，但我很难在页面上重新显示此列表。

我相信这是明显的东西，但我不能再看到树木。

感谢，H.

例如：

 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="[email protected](iId).Name" title="@t" header="@t" 
        href="@url" class="tile-icon"/> 
      </div> 
     </div> 
     }

这是脚本：从本地存储

<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>

的样本数据：

"\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 "]

来源

2017-09-14 hungryhorse

首先，你不应该有在DOM多于一个的ID，'ID = “排序”'被重复;其次，你不应该将整个元素内容存储在localStorage中，尝试存储一个id或它们的索引。 – DontVoteMeDown