0

ネストされたビューをレンダリングしようとしています。ビュー BigView と SmallView があるとします

<script type="text/template" id="big-template">
  <% _.each(smallViews, function (smallView) { %>
    <%= smallView.$el.html() %>
  <% }); %>
</script>

<script type="text/template" id="small-template">
  <div>
    <%- name %>
  </div>
</script>

から render を呼び出すとbigView、その children を含むすべてが正常にレンダリングされますsmallViews。

smallViewをレンダリングせずに を個別に更新 (レンダリング) するにはどうすればよいbigViewですか?

4

2 に答える 2

1

viewテンプレート コードからメソッドを呼び出さないことをお勧めします。rendersmallview のコードを bigviewメソッドに移動しますrender。

次のようになります。

var BigView = Backbone.View.extend({
   render:function() {
     for (var i=0;i<this.collection.length;i++) {
       var smallView = new SmallView({model:this.collection.at(i)});
       this.$el.append(smallView.render().el);
     }
     return this;
   }
});

次に、あなたのSmallView：

var SmallView = Backbone.View.extend({
  template:_.template($('#smallTemplate').html()),
  render:function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
});

これは、イベント ハンドラーを使用して再レンダリングする動作を示すフィドルです。smallView

于 2013-10-02T15:33:42.590 に答える
0

renderオブジェクトの適切に定義されたメソッドを呼び出すsmallViewだけで十分です。たとえば、このようなものです。

// smallview file
var SmallView = Backbone.View.extend({
    // some other methods

    template: _.template($("#small-template").html()),


    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

// where you need to update the nested views
_.each(smallViews, function(smallView {
    smallView.render();
}
于 2013-10-02T13:21:33.560 に答える