剣道：ローカルストレージから

をソートされたリストを取得し、私は基本的に、私は彼らがそう望むならば、ユーザは項目のリストを並べ替えることができるように剣道ソート可能なリストを使用しています<script type="text/x-kendo-template"剣道：ローカルストレージから

を使用して、ローカルストレージからのHTMLのレンダリングの問題が生じています。このリストは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