主干视图点击 hello world

发布于 2024-12-19 15:36:38 字数 999 浏览 0 评论 0原文

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

我错过了什么吗？可能出什么问题了？

原文

I'm trying to do a very simple hello world with Backbone. After reading docs and examples I think this should work, but doesn't do anything when I click:

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

Am I missing something? What could be wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

顾冷 2024-12-26 15:36:38

这里有两个问题：

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>

You have two problems here:

A Backbone view is tied to a specific DOM element. You have to attach your view to the DOM before it can respond to events.
The DOM may not be ready when your script executes, you have to wrap the view creation code with $(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>

回复收藏 0 原文

~没有更多了~