Javascript可排序架構設計方法

Question

我正在使用jQuery可排序的可連接列表，並且正計划嘗試構建一個具有3列的小型基本敏捷工具：積壓，工作，完成。 在Internet上（特別感謝stackoverflow），我可以找到足夠的信息來設計基本內容，例如可排序的列，位置或通過ajax調用或使用localstorage將元素狀態保存到后端，因此下一次用戶可以繼續他離開的地方。

我現在的主要問題是如何處理每個sortable / li的內容。 如何構建和設計基本信息，例如lis中包含的照片，文本或圖標。 我對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>