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);

<强> Check Fiddle

您正在绑定应该位于模板中的click的{{1}}事件。一旦你定义它应该工作，只要你的模板中有该类的元素。

<强> Calling render from initialize

Answer 2

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

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

Answer 3

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

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

无法在Backbone中绑定click事件

3 个答案: