1

js ファイル;

var dataModel = Backbone.Model.extend({
            defaults : {
                dataID : 'unknown',
                text : 'unknown'
            }
        });
        var LinkCollection = Backbone.Collection.extend({
            model : dataModel
        });

コレクションのサイズが 8 だとしましょう。一度に 3 つ表示したいと思います。スクリプトの構造上、コレクション アイテムを個別の div に分割する必要があります。

html ファイル;

<div class="item">
<div class="carousel-subItem">  <-- Collection item #1
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
<div class="carousel-subItem">  <-- Collection item #2
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
<div class="carousel-subItem">  <-- Collection item #3
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
</div>


<div class="item">
<div class="carousel-subItem">  <-- Collection item #4
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
<div class="carousel-subItem">  <-- Collection item #5
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
<div class="carousel-subItem">  <-- Collection item #6
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
</div>

<div class="item">
<div class="carousel-subItem">  <-- Collection item #7
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
<div class="carousel-subItem">  <-- Collection item #8
   <span>{{dataID}}</span> <br /> <span>{{text}}</span>
</div>
</div>

このhtml構造を動的に作成するのに苦労しています。（コレクションのサイズは変化する可能性があるため....構造は完全に動的である必要があります。

 {{#each dataModel}}
    // code goes here, to create the above structure.. 
 {{/each}}
4

1 に答える 1

0

たぶん、このようなものがあなたを助けるかもしれません：

<script type="text/tempalte" id="template">

<% var len = items.length, group = 3, i; %>
<% for (i = 0; i <len; i += 1) { %>
    <% if (i % group === 0) { %>
        <div class="item">
    <% } %>
        <div class="carousel-subItem"> 
            <span><%= items[i].dataID %></span> <br /> <span><%= items[i].text %></span>
        </div>
    <% if ((i % group === group-1) || (i === len -1)) { %>  
        </div>
    <% } %>
<% } %>
</script>

バックボーンを使用しているので、アンダースコアを使用したいと思っていました。アイテムコレクションは次のようになります。これは、バックボーンの観点に近いはずです。

var items = [
    { dataID : '1', text : 'bla' },
    { dataID : '2', text : 'blab' },
    { dataID : '3', text : 'gulp' },
    { dataID : '4', text : 'golp' },
    { dataID : '5', text : 'bla' }
];

// compiling the template
var template = _.template($('#template').html());
console.log(template(items));

出力は次のようになります。

<div class="item">

        <div class="carousel-subItem"> 
            <span>1</span> <br /> <span>bla</span>
        </div>



        <div class="carousel-subItem"> 
            <span>2</span> <br /> <span>blab</span>
        </div>



        <div class="carousel-subItem"> 
            <span>3</span> <br /> <span>gulp</span>
        </div>

        </div>



        <div class="item">

        <div class="carousel-subItem"> 
            <span>4</span> <br /> <span>golp</span>
        </div>



        <div class="carousel-subItem"> 
            <span>5</span> <br /> <span>bla</span>
        </div>

        </div>

より良いアプローチは、「カルーセル-サブアイテム」-divをレンダリングするItemViewと、レンダリングされたItemViewをコンテナーに結合する処理を行うCollectionViewを用意することです。Backbone.Marionetteはまさにそれを提供していると思います。たぶんあなたはそれをチェックしたいと思うでしょう。もちろん、自分でそのようなものを構築することもできます。

于 2012-10-22T21:31:47.570 に答える