Question

我有一组项目，我正在构建一个简单的界面，列出左侧的项目，然后显示右侧当前所选项目的详细信息。

我正在尝试为ItemsListView中的每个项目呈现ItemView。我需要绑定到模型的change事件，以便ItemView与ItemDetailView一起更新。

在下面的实现中，当更新ItemDetailView中显示的模型时，在模型上设置新属性会更新ItemDetailView，但不会更新它在ItemView中的表示。我知道我做的事情很傻。如何重新实现它以便重新渲染它们？

P.S。我试图避免每次重新呈现List视图。我想分别在列表中重新渲染每个ItemView。

var Item = Backbone.Model.extend({

});

var Items = Backbone.Collection.extend({

  model: Item

});

var ItemView  = Backbone.View.extend({

  template: window.JST['item/list'],

  initialize: function() {
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
  },

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

});

var ItemDetailView = Backbone.View.extend({

  el: $('.detail .grid'),

  template: window.JST['item/detail'],

  initialize: function() {
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
    this.render();
  },

  render: function() {
    $(this.el).html('').fadeOut('fast', function() {
      $(this.el).html(this.template(this.model.toJSON())).fadeIn();
    }.bind(this));
    return this;
  }

});

// for the Items collection
var ItemsView = Backbone.View.extend({

  el: $('.items ol.grid'),

  initialize: function() {
    _.bindAll(this, 'render');
  },

  render: function() {

    // need to put this as the first item in the list
    $(this.el).html('<li class="listHeader"></li>');

    // iterate over the collection and render each ItemView separately
    this.collection.each(function(l) {
      var lv = new ListView({ model: l, collection: this.collection });
      var html = lv.template(lv.model.toJSON());
      $(this.el).append(html);
    }.bind(this));
  }

});

Answer 1

我认为问题（可能不是唯一的问题？）是你没有在el上设置ItemView属性，所以它不知道如何渲染自己。我不确定解决这个问题的最佳方法是什么。也许使用<li id='<#= cid #>' ...将客户端ID添加到模板，然后在initialize的{{1}}函数中，使用ItemView或类似内容设置el。

Backbone.js - 视图和重新渲染中的视图

1 个答案: