骨干網視圖事件不起作用

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的元素。