3

この質問を始める前に、backbone.js を初めて使用し、次の機能を実装したい場合は、バックボーン リレーショナル モデルを使用する必要があります。少なくとも、そう思われます。

backbone.js を介して実装される階層を作成しようとしていますが、階層を構造化して要素にアクセスする方法を知りたいと思っていました。リスト/セット/アイテムを追加および削除できるようにする必要があり、できれば一貫した番号付けポリシーを維持する必要があります。(List1 の表示名は list1 になります。Set1 を削除した場合、対応するアイテムを保持したまま Set2 を Set1 にする必要があります)

List1 
^--->Set1  
     ^--->Item1
     ^--->Item2
^--->Set2   
     ^--->Item1

List2 
^--->Set1  
     ^--->Item1
^--->Set2   
     ^--->Item1
     ^--->Item2

等

私の質問は次のとおりです。同じ階層に従う関数のセットが最もコンパクトで論理的な方法でアクセスできるように、これをどのように構造化しますか?

私が持っていた1つのアイデア：divを使用し、div idを id="List"+currentlistnum()+"Set"+currentsetnum()+"Item"+currentitemnum() のようなものにするだけです

これよりも良い方法はありますか？

4

1 に答える 1

3

意味的に「リスト」である項目のリストがある場合は、順序付きリスト (ol) または順序なしリスト (ul) を使用します。次に、サブリストがある場合は、さらにリストをネストします。

<ul id="mylist">
    <li>
        <span>List 1</span>
        <ul>
            <li>
            <span>Set1</span>
                <ul>
                    <li>List1Set1Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
            </li>
            <li>
            <span>Set2</span>
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

また、jQuery の nth Child セレクターと直接の子>を残りのロジックに使用して、特定の要素を選択することで、アプリケーション ロジックを HTML から遠ざけることができます。

$('#mylist > li:nth-child(1) > span').text(); // List1
$('#mylist > li:nth-child(1) > ul > li:nth-child(1) > ul > li:nth-child(1)')
   .text(); //List1Set1Item1

番号付けシステムをアタッチしたい場合: 現在のビューに従って番号を更新するようにすべてのセットを更新する例:

$('#mylist > li > ul > li > span').each(function(){
  var ordinalPositionOfMyParent = $(this).parent().index() + 1;
  $(this).text('Set' + ordinalPositionOfMyParent);
  });
于 2012-07-26T00:36:24.470 に答える