javascript - 无法在 Backbone 中绑定点击事件

Question

我似乎无法将点击事件绑定到下面代码段中的操作。有任何想法吗？

var SelectView = Backbone.View.extend({
  template: "#select-template",
  initialize: function() {
    this.render();
  },
  events: {
    "click .placeholder": "optionsDropdown",
  },
  render: function() {
    context = {className: this.className, options: this.model.get("options"), placeholder: this.model.get("placeholder")};
    $(this.el).html(getHTML(this.template, context));
  },
  optionsDropdown: function() { 
    alert("Hello");
  },
});

Answer 1

我认为问题是这条线

className: this.className

我在视图定义中的任何地方都没有看到 className 变量

  var SelectView = Backbone.View.extend({
    initialize: function () {
        this.className = 'placeholder';
    },
    events: {
        "click .placeholder": "optionsDropdown",
    },
    render: function () {
        context = {
            className: this.className,
            options: this.model.get("options"),
            placeholder: this.model.get("placeholder")
        };
        var template = _.template( $("#select-template").html(), context );

        this.$el.html(template);
    },
    optionsDropdown: function () {
        alert("Hello");
    },
});

var Model = Backbone.Model.extend({});

var newModel = new Model({
    'options' : 'Hello',
    'placeholder' : 'Type your name'
});

var newView = new SelectView({model : newModel});
newView.render();
$('.container').append(newView.el);

检查小提琴

您正在绑定应该在模板中的click事件。class="placeholder"一旦定义了它应该可以工作，前提是您的模板中有该类的元素。

从初始化调用渲染

Answer 2

您可以将 DOM 元素绑定到处理程序，例如，"click li":"optionsDropDown"

编辑：你错过了目标元素..这是一个工作小提琴 http://jsfiddle.net/FGeJd/

Answer 3

您在事件定义中缺少选择器。它应该是这样的（假设输入 id 是 optionsId）：

events : {
    "click #optionsId": "optionsDropDown"
}