Kendo：从本地存储中检索排序列表

Question

我在使用 <script type="text/x-kendo-template" 从本地存储渲染 HTML 时遇到问题

基本上，我使用 kendo 可排序列表来允许用户重新排序项目列表，如果他们愿意的话。此列表由 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="=@Umbraco.TypedMedia(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    "]

Answer 1

感谢 Telerik 的工作人员，我现在已经能够解决我的问题了！

这是为解决我的问题而提供的代码演示。 http://dojo.telerik.com/ixono/7

干杯， H