在Backbonejs的主视图中点击事件不会触发

我真的很奇怪的问题。我试图实现“root”视图，它也可以作为一些命名空间结构。在codechool.com课程第二部分中介绍了相同的原则。在这个根视图中，我想捕获事件“单击按钮”，但这是问题所在。当我点击按钮什么都没有发生。在Backbonejs的主视图中点击事件不会触发

window.App = new (Backbone.View.extend({ 
    el: $("#app"), 
    Collections: {}, 
    Models: {}, 
    Views: {}, 
    Routers: {}, 
    events: { 
    'click button' : function(e) { 
     alert("Thank god!"); 
    } 
    }, 
    render: function(){ 
    //for test purposes 
    console.log($("#app").find("button")); 
    console.log(this.$el.find('button')); 
    }, 
    start: function(){ 
    this.render(); 
    new App.Routers.PostsRouter(); 
    Backbone.history.start({pushState: true}); 
    } 
}))(); 



$(document).ready(function() { App.start() });

的HTML这个样子的

<body> 
    <div id="app"> 
     <div id="posts"></div> 

     <button>Click me</button> 
    </div> 
</body>

，什么是真正奇怪的是CONSOLE.LOG在渲染功能输出。两个选择器都是相同的，即使上下文相同，所以问题在哪里？

console.log($("#app").find("button")); //this returns correct button 
console.log(this.$el.find('button')); //this returns 0 occurences (WTF?)

编辑：在el: "#app"变化不大，还是同样的问题后。问题是（感谢@nemesv）在加载DOM之前实例化这个类。但是，在DOM加载后不可能实例化，因为那样就不可能使用该名称空间结构（例如App.Model.Post = Backbone.Model.extend（））。但是，这个“名称空间结构的主视图”是在codechool.com课程中引入的，作为某种良好实践。可以在那里找到解决方案http://jsfiddle.net/BckAe

来源

2013-02-12 Petr Brázdil

您已将您的el指定为jquery选择器，但因为您位于对象文本中，所以在DOM加载之前立即进行评估。

所以el: $("#app"),不会选择任何东西。

您可以通过使用其中一个主干功能来解决此问题，您可以将el初始化为包含选择器的字符串。

因此改变你的el声明：

el: "#app"

则不会触发点击事件，因为你之前的DOM被加载，从而骨干不能做事件委派的实例化视图。

所以你需要将你的视图声明和创建分成两个步骤。并且只在加载DOM时实例化您的视图：

var AppView = Backbone.View.extend({ 
    el: "#app", 
    //... 
}); 

$(document).ready(function() 
{ 
    window.App = new AppView(); 
    App.start() 
});

演示：JSFiddle。

来源

2013-02-12 09:30:09 nemesv

我曾尝试过，但没有任何改变。同样的问题，点击按钮或任何其他事件不会被触发。 – 2013-02-12 09:43:16

点击事件未被触发，因为您在加载DOM之前实例化了您的视图。将视图声明和创建分为两步。并且只在加载DOM时实例化你的视图。 http://jsfiddle.net/45dhY/ – nemesv 2013-02-12 09:50:54

那么，现在这个代码的作品，但发生了另一个问题。现在我无法做类似于App.Models.Post = Backbone.Model.extend（..）的事情，因为它没有定义，AppView.Model.Post也不能工作。我需要把它放到那个类的实例中，但是在DOM被加载后这是可用的... – 2013-02-12 10:03:28

在Backbonejs的主视图中点击事件不会触发

回答

相关问题