Backbone View单击hello world

Question

Backbone View单击hello world

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Ben*_*ret 6

你有两个问题:

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，10 月前
查看次数：	2210 次
最近记录：	13 年，10 月前