0

バックボーンを使用してカテゴリのテーブルを表示しています。2つのビューを作成しました。

  • RowView（単一のtrを含む）
  • TableView（テーブル構造を含む）

定義：

RowView = Backbone.View.extend({
  el: "#content table tbody",
  initialize: function() {
    this.render();
  },
  render: function(){
    var params = { name: this.model.get('name'), route: this.options.route };
    var template = _.template( $("#rowTemplate").html(), params);
    this.$el.append(template);
  },
  events: {
    "click #name": "clickHandler"
  },
  clickHandler: function( event ) {
    console.log('Browse subcategories of ' + this.model.get('name'));
  }
});

TableView = Backbone.View.extend({
  el: "#content",
  initialize: function(){
    this.render();
  },
  render: function(){
    var row = new this.collection();
    var that = this;
    row.fetch({
      success: function() {
        console.log('Collection fetch succeeded');
        var params = { title: that.options.title,
                       counter: row.at(0).get('counter'),
                       route: that.options.route
                     };

        var template = _.template( $("#tableTemplate").html(), params);
        that.$el.html( template );
        // RowView's are created by iteration here
        for(var x = 1; x < row.length; x++) {
          var params = { model: row.at(x), route: that.options.route };
          var view = new RowView(params);
        }
      }
    });
  }
});

ご覧のとおり、RowViewにクリックイベントを添付しました。

RowViewテンプレート：

<script type="text/template" id="rowTemplate">
<tr>
  <td id="name" class="fill"><%= name %></td>
  <td><a href="#<%= route %>/<%= name %>/edit" class="btn">Editar</a></td>
</tr>
</script>

いずれかをクリックする#nameと、ビューのすべてのインスタンスでハンドラーがトリガーされます。したがって、1つのカテゴリをクリックすると、次のようになります。

Browse subcategories of category1 127.0.0.1:68
Browse subcategories of category2 127.0.0.1:68
etc...

私の知る限り、それはすべてRowView'sが同じに委任されているためelです。

私が最初に考えたのは、にを追加category nameしrowTemplate、DOMの値をビューの値と比較して、実際にイベントをトリガーする値を確認することでした。

しかし、その解決策は本当に醜いように見えます。これを達成する正しい方法は何Backboneですか？

追加：ビューを1つだけ作成し、テンプレートを反復処理して行を生成する方がよいと考えられますか？

編集：提供されたコードで十分だと思います。それ以外の場合は追加できます。

4

3 に答える 3

1

あなたはこのように変更することができますRowView：

RowView = Backbone.View.extend({
    container: '#content table tbody',
    tagName: 'tr',
    initialize: function() {
        this.render();
    },
    render: function() {
        var params = {
            name: this.model.get('name'),
            route: this.options.route
        };
        var template = _.template($("#rowTemplate").html(), params);
        this.$el.html(template).appendTo(this.container);
    },
    events: {
        "click .fill": "clickHandler"
    },
    clickHandler: function(event) {
        console.log('Browse subcategories of ' + this.model.get('name'));
    }
});

およびRowViewテンプレート：

<script type="text/template" id="rowTemplate">
<td class="fill"><%= name %></td>
<td><a href="#<%= route %>/<%= name %>/edit" class="btn">Editar</a></td>
</script>

Backbone.jsはtr要素を作成します。次にthis.$el.html(template).appendTo(this.container)、tr要素にテンプレートを入力し、に追加し#content table tbodyます。

そのように、RowViewのイベントは、ではなくRowViewのelに委任されます#content table tbody。

于 2013-02-21T03:50:51.887 に答える
0

すべての行に同じIDを持つ要素が複数あるため、ページに同じIDを持つ要素が複数あります。

<td id="name" class="fill">エレメント。

要素IDは、ドキュメント内で一意である必要があります。

1つの解決策は、テンプレートの行を区別し、イベントを関数として使用して適切なIDを設定することです。

レンプレート：

<script type="text/template" id="rowTemplate">
<tr>
  <td id="name-<%= name %>" class="fill"><%= name %></td>
  <td><a href="#<%= route %>/<%= name %>/edit" class="btn">Editar</a></td>
</tr>

イベント機能：

events: function(){
  _events = {};
  _events["click #name-" + this.model.get('name')] = "clickHandler";
  return _events;
}
于 2013-02-21T05:22:03.600 に答える
0

これを試して

RowView = Backbone.View.extend({
    container: '#content table tbody',
    tagName: 'tr',


  //  initialize: function() {
 //           this.render();
 //       },
    render: function() {
        var params = {
            name: this.model.get('name'),
            route: this.options.route
        };
        var template = _.template($("#rowTemplate").html(), params);
        this.$el.append(this.template);
    },
    events: {
        "click .name": "clickHandler"
    },
    clickHandler: function(event) {
        console.log('Browse subcategories of ' + this.model.get('name'));
    }
});

RowViewテンプレート（各行ビューを識別する必要はありません）：

<script type="text/template" id="rowTemplate">
<td class="name"><%= name %></td>
<td><a href="#<%= route %>/<%= name %>/edit" class="btn">Editar</a></td>
</script>

次に、テーブルビュー：

...
       that.$el.html( template );
        // RowView's are created by iteration here
        for(var x = 1; x < row.length; x++) {
          var params = { model: row.at(x), route: that.options.route };
          var view = new RowView(params);
          that.$el.find('tbody').append(view.el);
          view.render()

        }
...
于 2013-02-21T06:00:16.343 に答える