Question

有人可以告诉我为什么以下不起作用。我点击链接

时会发出警报

<body>
    <a class="newnote" href="#">Add new note</a>
</body>

<script>
var note = Backbone.Model.extend({});

var notes = Backbone.Collection.extend({
    model: note,
    url: '<?= $this->createUrl('/filenotes/api'); ?>'
});

var note_view = Backbone.View.extend({
    el: 'table',

});

var Appview = Backbone.View.extend({
    el: $('body'),

    events: {
        "a click" : "showForm"
    },
    initialize: function(){
        //alert('hi');  
    },
    showForm: function(){
        alert('hi');
    }
});

var v = new Appview();
</script>

这里有一个jsfiddle http://jsfiddle.net/neilcharlton/yj5Pz/1/

Answer 1

你的$("body")选择器在你的DOM加载之前被激活，所以它返回空并且永远不会绑定到链接。

Backbone对象定义是使用对象文字定义的，这意味着它们会在定义时立即进行评估，而不是在实例化模型时。

此：

Backbone.View.extend({foo: "bar"})

在功能上与此相同：

var config = {foo: "bar"};
Backbone.View.extend(config);

由于$("body")选择器作为el的值，因此只要解析了View配置就会对其进行评估，这意味着DOM尚未加载，并且不会返回任何内容。

有很多选项可以解决这个问题...所有这些都涉及延迟选择器的评估，直到加载DOM为止。

我个人最喜欢的是在DOM加载后将选择器传递到实例化的视图中：

var AppView = Backbone.View.extend({
  // don't specify el here
});

$(function(){
  // after the DOM has loaded, select it and send it to the view
  new AppView({ el: $("body") });
}

另外 - 像Skylar所说，你的事件被宣布错误。

这是一个有效的JSFiddle：http://jsfiddle.net/yj5Pz/5/

Answer 2

对于初学者，events对象具有以下语法：

events: {
    "click a" : "showForm"
},

Answer 3

除了Derick的回答，请注意DOM元素的范围，我试图在元素上触发一个简单的click事件但是我的View.el引用了一个非直接的父元素，然后由于某种原因（可能是一个递归bug））没有工作。当我把el改为“body”css选择器时，一切都很顺利。

backbone.js简单视图事件未触发

3 个答案: