2

私はjqueryのソート可能な接続リストを使用しており、バックログ、作業中、完了の3つの列を持つ小さくて基本的なアジャイルツールを構築しようと計画しています。インターネットでは（特にstackoverflowのおかげで）、並べ替え可能な列、位置、要素の状態の保存などの基本的な情報をajax呼び出しやlocalstorageを使用してバックエンドに保存するのに十分な情報を見つけることができたので、次回ユーザーは離れた場所から続行できます。

今の私の主な問題は、各sortable/liのコンテンツにどのようにアプローチするかです。lis内に含まれる写真、テキスト、アイコンなどの基本情報を構造化および設計する方法。stackoverflowに対する私の質問は、アーキテクチャのアプローチについてです。コンテンツをバックエンドに保存したり、編集したりできるように、コンテンツをどのように構成する必要がありますか。実際のWebアプリのアプローチはどうでしたか。

私はこのようなことを考えていました（私は単純化の目的で非常に基本的なestructureを投稿しています）が、私が正しいことをしているかどうかはわかりません。

<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>

よろしくお願いします

4

1 に答える 1

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>
于 2013-02-26T08:14:22.577 に答える