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>