骨干查看点击世界你好

我正在尝试用Backbone做一个非常简单的hello world。阅读文档和例子之后，我觉得这应该工作，但是当我点击不会做任何事情：骨干查看点击世界你好

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> 
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> 
    <script type="text/javascript"> 
     var AppView = Backbone.View.extend({ 

      events: { 
       'click #new': 'createNew' 
      }, 

      //CREATE 
      createNew: function(){ 
       alert('yea'); 
      } 

     }); 

     var app_view = new AppView(); 
    </script> 
    </head> 
    <body> 

    <a href="#new" id="new">new</a> 
    </body> 
</html>

我这么想吗？什么可能是错的？

来源

2011-12-02 anders

您这里有两个问题：

一个骨干视图绑定到特定的DOM元素。在响应事件之前，您必须将您的视图附加到DOM。
当您的脚本执行时DOM可能没有准备好，您必须用$(document).ready包装视图创建代码。

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> 
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> 
    <script type="text/javascript"> 
     var AppView = Backbone.View.extend({ 

      events: { 
       // the element IS the link, you don't have to specify its id there 
       'click': 'createNew' 
      }, 

      //CREATE 
      createNew: function(){ 
       alert('yea'); 
      } 

     }); 

     $(document).ready(function() { 
     // attach the view to the existing a element 
     var app_view = new AppView({ 
      el: '#new' 
     }); 
     }); 
    </script> 
    </head> 
    <body> 

    <a href="#new" id="new">new</a> 
    </body> 
</html>

来源

2011-12-02 10:02:16

就是这样，谢谢你benoit！ – anders

骨干查看点击世界你好

回答

相关问题