Javascript的排序架構設計方法

Question

我正在與jQuery的可排序連接列表，我打算嘗試構建一個小的和基本的敏捷工具與3列：積壓，工作，完成。在互聯網上（特別感謝stackoverflow），我可以通過ajax調用或使用本地存儲找到足夠的信息來設計可排序列，位置或保存元素狀態等基本內容，以便下次用戶可以繼續離開他的位置。

我現在的主要問題是如何處理每個可排序/ li的內容。如何構建和設計基本信息，例如照片，文本或圖標裏面的圖標。我的問題是stackoverflow是關於架構方法。我應該如何構建內容，以便將其保存到後端，我可以編輯它等等。真正的Web應用程序的方法如何？

我在弄清楚這樣的事情（爲了簡化的目的，我發佈了一個非常基本的結構），但是我不知道我是否做得正確。

<div id="sortable-1"> 

    <ul class="sortable-list" id="list-1"></ul> 

     <li class="sortable-item' id="1"> 
      <h2 class="title">Event</h2> 
      <p class="date">Friday, August 18, 2009</p> 
      <p><img src="img/sample.jpg" width="240" height="80" alt=""/></p> 
      <p class="content">Aliquam augue neque, rhoncus et dictum in,mauris.</p> 
     </li> 

     <li></li> 
      ........ 
</div> 

非常感謝你事先並把

Answer 1

更多的時候我做這個東西，我傾向於開始一個JS對象，並從那裏構建文檔。這使您可以將每個項目與其DOM位置相關聯，從而簡化就地編輯。我不介意知道這種方法有什麼問題。

在（重新）寫入文檔之前，您可以對關聯objs數組進行排序。

使用jQuery：

<div id="sortable-1"> 
    <ul class="sortable-list" id="list-1"></ul> 
</div> 
<script> 
$(function() { 
    var objs = [ 
     { 
      id:1, 
      title:'Event1', 
      date:'Friday, August 18, 2009', 
      imgSrc:'img/sample.jpg', 
      content:'Aliquam augue' 
     },{ 
      id:2, 
      title:'Event2', 
      date:'Friday, August 28, 2009', 
      imgSrc:'img/sample.jpg', 
      content:'Aliquam augue 2' 
     } 
    ]; 

    var l1$ = $('#list-1'); 

    // loop objs data, create elements/append to dom 
    $.each(objs, function(i, obj) { 
     if (!obj) return true; 

     var li$ = $('<li class="sortable-item"/>').attr('id', obj.id).appendTo(l1$); 

     // place element in objs to keep track of its place in dom 
     obj.li$ = li$; 

     $('<h2 class="title"></h2>').text(obj.title).appendTo(li$); 
     $('<p class="date"/>').text(obj.title).appendTo(li$); 
     $('<img width="240" height="80"/>').attr('src', obj.imgSrc).appendTo($('<p/>').appendTo(li$)); 
     $('<p class="content"/>').text(obj.content).appendTo(li$); 
    }); 
}); 
</script>