骨干视图单击hello world

Backbone View click hello world

本文关键字：hello world 单击 视图      更新时间：2023-09-26

我正在尝试用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>

我错过了什么吗?会出什么问题呢?

这里有两个问题:

  1. 主干视图绑定到一个特定的DOM元素。你必须把你的视图附加到DOM上，然后它才能响应事件。
  2. 当脚本执行时，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>
相关文章：