Question

我有像这样的骨干视图

 window.InputView = Backbone.View.extend({
        tagName:'input',
        className:'',
        attributes:{},
        initialize:function(){
            this.attributes=this.model.attributes;
            this.el = this.make(this.tagName,this.attributes,'');
        }
    });

我遇到的问题是当我修改视图的attributes哈希值时，它没有反映在el上，

所以我必须做这样的事情this.el = this.make(this.tagName,this.attributes,''); 为了反映变化。

这是唯一的方法，还是有更好的方法呢？喜欢自动化吗？

Answer 1

我想简单地覆盖视图的el属性，这不是你想要的。如下所示，make函数不会将新创建的元素附加到DOM，因此不会显示，并且不会从页面中删除旧元素。

修复它的可能方法：

initialize: function(){
  this.attributes = this.model.attributes; // why are you doing this anyway? :)
  var $oldEl = this.$el; // backbone 0.91
  var newEl = this.make(this.tagName,this.attributes,'');
  $oldEl.after( newEl ); // the old element must be in the DOM, when doing this!
  $oldEl.remove();
  this.setElement( newEl ); // proper setup
}

来自BackBone的消息来源：

make: function(tagName, attributes, content) {
  var el = document.createElement(tagName);
  if (attributes) $(el).attr(attributes);
  if (content) $(el).html(content);
  return el;
},

setElement: function(element, delegate) {
  this.$el = $(element);
  this.el = this.$el[0];
  if (delegate !== false) this.delegateEvents();
  return this;
},

Answer 2

要在模型更改时自动执行您尝试执行的操作，您需要将方法绑定到模型的更改事件。在初始化方法中，您需要以下内容：

initialize: function() {
    this.model.on("change", updateElement);
    ...
}

然后在视图中定义该方法：

updateElement: function() {
    //use this.model.attributes to update your el
}

现在，只要与该视图关联的模型发生更改，updateElement方法就会运行。

Backbone.js：更改view.attributes并不反映在view.el上

2 个答案: