0

ボックス内にボックスを表示するアプリがあります。各ボックスモデルには、ボックス内に表示されているすべてのボックスを返すメソッド「children」があります。私がやりたいのは、ボタンをクリックして、子をテーブルとしてレンダリングし、プロパティをいくつかの列にリストすることです。

これを行う方法がよくわかりません。アンダースコアテンプレートは次のようになります。

<table class='list-items-template'>
          <tr>
          <td><%= this.model.ITSCHILDX.get('image') %>       </td>
          <td><%= this.model.ITSCHILDX.get('title') %>       </td>
          <td><%= this.model.ITSCHILDX.get('description') %> </td>
          </tr>
      </table>

ただし、ボックスビュー内では、各子をテーブル内に挿入し、その各属性を表す必要があるという言い方が必要です。ヘルプは大歓迎です。

4

2 に答える 2

2

テンプレートにコードブロックを挿入することで、反復ロジックをテンプレートに追加できます。例を変更するには：

<table class='list-items-template'>
    <% for (var idx in this.model.ITSCHILDX) { %>
        <tr>
            <td><%= this.model.ITSCHILDX[idx].get('image') %></td>    
            <td><%= this.model.ITSCHILDX[idx].get('title') %></td>    
            <td><%= this.model.ITSCHILDX[idx].get('description') %></td>    
        </tr>
    <% } %>
</table>
于 2012-09-10T04:39:20.560 に答える
1

セットアップを正しく理解しているかどうかはわかりませんが、BoxModelがあります。

BoxModel = Backbone.Model.extend({
    defaults: {
        'image':string,
        'title':string,
        'description':string
    }
});

また、BoxModelには子BoxModelを含めることができますか？

boxModel.children = new Collection(); // of box models?

そして、子コレクションを反復処理して、各モデルをテーブル行として表現したいですか？

これがあなたがここで望むものであるならば、私がすることです。ボックスモデルはテーブルであるBoxViewで表され、その子は基本的に行として表されます。したがって、これを次のように定義します。

BoxView = Backbone.View.extend({
    tagName: 'table',
    className: 'list-items-template', // I just used this name to connect it with your ex.
                                      // I'd probably change it to like, box-table
    template: _.template('<tr>
        <td><%= image %>       </td>
        <td><%= title %>       </td>
        <td><%= description %> </td>
        </tr>'),
    initialize: function() {
        // Note: We've passed in a box model and a box model has a property called
        // children that is a collection of other box models
        this.box = this.model;
        this.collection = this.box.children // Important! Assumes collection exists.
    },
    render: function() {
        this.$el.html(this.addAllRows());
        return this;
    },
    addAllRows: function() {
        var that = this;
        var rows = '';
        this.collection.each(function(box) {
            rows += that.template(box.toJSON());
        });
        return rows;
    }
});


// This assumes that whatever BoxModel you have instantiated, it has a property called
// children that is a collection of other BoxModels. We pass this in.

// Get the party started
var myBoxTable = new BoxView({
    'model': someBoxModel  // Your box model, it has a collection of children boxModels
});

// Throw it into your page wherever.
$('#placeToInsert').html(myBoxTable.render.el());

また、これは基本的に、この例では子boxModelsが視覚的に表されていることを意味することに注意してください。各子（行）に何らかの機能が必要な場合は、テンプレートを使用して視覚的な表現を書き出すのではなく、このaddAllRows()メソッドを使用して2番目のタイプのBoxModelビューをインスタンス化します。テーブル行であり、適切に委任されたイベントなどのより多くの機能を備えたビュー。

于 2012-09-10T04:12:06.810 に答える