Question

我正在尝试用Backbone做一个非常简单的hello世界。在阅读了文档和示例后，我认为这应该可行，但是当我点击时不会做任何事情：

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

我错过了什么吗？可能有什么不对？

Answer 1

这里有两个问题：

Backbone视图绑定到特定的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>

Backbone View单击hello world

1 个答案: