骨干网视图事件不起作用

Question

我创建了一个简单的主干页面，它从服务器获取一些设置（JSON）并将其插入到表中（每行是一个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()"时，相同的事件onfocus="alert()"起作用。

我在这里制造了一个小提琴

Answer 1

那是因为这里：

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

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

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

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