-2

backbone.js を使用して html5 アプリケーションを開発しています。html の形式にはリスト要素が含まれます。要素のラベルはliWeb サービスから取得されliます。要素を動的に設定しています。

コレクション内のすべてのラベルを取得し、テンプレートに送信しています。li今、要素に2つの要素をul動的に挿入したいのですが、どうすればそれを達成できますか?

私のhtmlは次のようになっています

<div class="auto_data">  
<li>  
<label style="color:white">Name<sup>*</sup></label><input type="text">  
</li>  
<li>
<label style="color:white">Age<sup>*</sup></label><input type="text">  
</li>  
<li><label style="color:white">Gender<sup>*</sup></label><input type="text">  
</li>  
<li>  
<label style="color:white">salutation<sup>*</sup></label><input type="text">  
</li>  
</div>

今、2つのli要素ごとにul要素を挿入したい

<ul>
<li>....</li>
<li>....</li>
</ul>

今、私は私の見解で次のように書いています

 _.each(this.questionReferenceCollection.models,function(model){
                                      uiControl=model.get('UIControlType');
                                      if(i==0){
                                      $('.auto_data',self.el).append('<ul>');
                                      }
                                      i++;

                                       $('.auto_data',self.el).append(new questions({
                                                                       model:model,
                                                                       controlType:uiControl
                                                                       }).render().el);/* this will render li template */
                                       if(i==2){
                                       $('.auto_data',self.el).append('</ul>');
                                       i=0;
                                       }

                                       });

しかし、非同期呼び出しのため、

その結果、

   <ul></ul>
    <li>...</li>
    <li>...</li>
    <ul></ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>

私が欲しい

<ul>
<li>..</li>
<li>..</li>
</ul>

私に提案してください。

4

2 に答える 2

0

たとえば、テンプレートでコレクションをループできます。そのループでは、モジュロ演算子 (%) を使用して、現在のインデックスが 2 で割り切れるかどうかを判断できます。割り切れる場合は、その時点で終了 ul と開始 ul を追加します。

于 2013-07-10T14:47:02.793 に答える
0

編集：もう少し単純なアプローチで更新されました。

これは最初に見えるよりも少しトリッキーですが、いくつかのクリエイティブなセレクターを使用することで、最終的にそれを行うコードはそれほど悪くありません:

var $autoDataDiv = $(".auto_data");

while ($autoDataDiv.children("li").length > 0) {
    var $newUL = $("<ul />");

    $newUL.append($autoDataDiv.children("li:first"));
    if ($autoDataDiv.children("li:first")) {
        $newUL.append($autoDataDiv.children("li:first"));
    }

    $autoDataDiv.append($newUL);        
}

基本的に<li>、「auto_data」の直接の子である要素を選択し、<div>それらをペアで新しく作成された<ul>要素に移動し、それらの要素を元の親に追加し<div>ます。

コードの「最もトリッキーな」部分は、を新しい$autoDataDiv.children("li:first")に移動するときに 2 回使用するという事実です。これが機能する理由は、 anが newに移動すると、「auto_data」の直接の子ではなくなるため、セレクターによって返されなくなるためです。そのため、最初のが に移動すると、選択グループから消え、次の が によって返された場所に移動します。<li><ul><li><ul><div><li><ul><li>$autoDataDiv.children("li:first")

とにかく、これはあなたのために働くはずです。. . ご不明な点がございましたら、お知らせください。

于 2013-07-11T15:11:49.070 に答える