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

发布于 2024-12-10 16:24:55 字数 792 浏览 0 评论 0原文

有人可以告诉我为什么以下不起作用。我希望单击链接时会触发警报

<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 /尼尔查尔顿/yj5Pz/1/

原文

Can someone tell me why the following doesnt work please. I am expecting the alert to fire when I click the link

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

There is a jsfiddle here http://jsfiddle.net/neilcharlton/yj5Pz/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落画卷 2024-12-17 16:24:55

您的 $("body") 选择器在加载 DOM 之前触发，因此它返回空并且永远不会绑定到链接。

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

这：

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/

Your $("body") selector is firing before your DOM is loaded, so it's returning empty and never binding to the link.

Backbone object definitions are defined with object literals, which means they get evaluated immediately on definition, not when you instantiate the model.

This:

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

Is functionally the same as this:

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

Since you have a $("body") selector as the value for el, it gets evaluated as soon as the View configuration is parsed, meaning the DOM has not yet loaded and nothing will be returned.

There are a number of options for solving this... all of which involve delaying the evaluation of the selector until after the DOM is loaded.

My personal favorite is to pass the selector in to the view at instantiation, after the DOM has loaded:

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

Also - like Skylar said, your event was declared wrong.

Here's a working JSFiddle: http://jsfiddle.net/yj5Pz/5/

回复收藏 0 原文