Backbone 查看活动无效

Question

我创建了一个简单的 backbone 页面，它从服务器获取一些设置 (JSON) 并将它们插入 table（每行是一个 settingModel实例）。

现在我想使用事件来更改模型的属性，当用户更改它们并将设置与服务器同步时。

我为模型视图使用了以下代码：

app.settingView = Backbone.View.extend ({  // View for Model

  tagName: 'tr',

  template: _.template( $('#setting-template').html() ),

  events: {
    'focus input':'showAlert'
  },

  render: function () {
    var modelData = this.model.toJSON();
    var settingTemplate = this.template(modelData);
    this.$el.html(settingTemplate);
    return this;
  },

  showAlert: function(){
    alert("You Are Editing");
  }
});

但它不会触发事件，当我在我的 input 标签中使用内联 onfocus="alert()" 时，同样的事件有效。

我创建了一个fiddlehere

Answer 1

那是因为这里：

$('.container').html($(settingsView.render().el).html());

您正在使用视图元素的 HTML 内容。您应该附加视图的元素本身。

$('.container').append(settingsView.render().el);

这是因为 Backbone 使用事件委托语法来绑定视图事件处理程序。由于您附加的是视图内容的 html 表示，因此附加的元素不是视图元素的后代，因此事件不会传播到视图元素。

Backbone 查看活动无效

Backbone View events not working

javascript

backbone.js