重新渲染Backbone视图而不会丢失对dom的引用

Question

我对骨干有以下问题,我想知道什么策略更合适

我有一个选择控件,实现为Backbone视图,最初加载一个选项说"加载选项".所以我加载一个只有一个元素的数组,然后渲染视图.

选项将从集合中加载,因此我将触发一个fetch集合.

然后我初始化一个负责显示每个字段的行错误的组件.所以我保存了组合的dom元素的引用.

当获取操作最终准备就绪时,我使用从集合中加载的所有选项重新呈现控件.

为了呈现视图我使用这样的东西:

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

相当标准的骨干东西

问题是,在第二次渲染视图后,dom的引用不再有效,

也许这种情况有点奇怪,但我可以想到很多情况下我必须重新渲染视图而不会丢失他们的doms引用(例如,依赖于另一个组合的组合)

所以我想知道重新渲染视图的最佳方法是什么,而不会丢失视图中所有对dom元素的引用...

Answer 1

目的Backbone.View是将对某个DOM子树的访问封装到一个定义良好的类中.传递对DOM元素的引用是一种糟糕的Backbone实践,这些应该被视为视图的内部实现细节.

相反,您应该让您的观点直接沟通,或通过调解员间接沟通.

直接沟通可能看起来像:

var ViewA = Backbone.View.extend({
  getSelectedValue: function() {
    return this.$(".combo").val()
  }
});

var ViewB = Backbone.View.extend({
  initialize: function(options) {
    this.viewA = options.viewA;
  },
  doSomething: function() {
    var val = this.viewA.getSelectedValue();
  }
});

var a = new ViewA();
var b = new ViewB({viewA:a});

并且间接使用根Backbone对象作为中介:

var ViewA = Backbone.View.extend({
  events: {
    "change .combo" : "selectedValueChanged"
  },
  selectedValueChanged: function() {
    //publish
    Backbone.trigger('ViewA:changed', this.$('.combo').val());
  }
});

var ViewB = Backbone.View.extend({
  initialize: function(options) {
    //subscribe
    this.listenTo(Backbone, 'ViewA:changed', this.doSomething);
  },
  doSomething: function(val) {
    //handle 
  }
});

var a = new ViewA();
var b = new ViewB();

当然,上面的内容非常通用,但我在这里要说明的一点是,您不必担心DOM元素是否被交换,因为没有其他视图应该知道元素的存在.如果您定义视图之间的接口(通过方法调用或中介消息传递),您的应用程序将更易于维护且不那么脆弱.