主干事件哈希不起作用

Backbone events hash not working

本文关键字：不起作用 哈希 事件      更新时间：2023-12-16

我只是想让Backbone事件必须工作。我有一些html:

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#" id="about">About</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

我想在单击about链接时分配一个单击处理程序。这是我的js:

define(function(require) {
  'use strict';
  var Backbone = require('backbone');
  var headerTemplate = require('hbs!app.templates/header.view');
  var Header = Backbone.View.extend({
    template: headerTemplate,
    render: function() {
      return this.template();
    },
    events: {
      'click #about': 'about'
    },
    about: function() {
      console.log("Clicked About");
    }
  });
  return Header;
});

我的视图在我的路由器中被实例化。这是代码：

define(function(require) {
  'use strict';
  var Backbone = require('backbone');
  var Header = require('views/header.view');
  var MainBody = require('views/main.body.view');
  var Router = Backbone.Router.extend({
    routes: {
      "": "main",
    },
    main: function() {
      var header = new Header();
      $('#header').html(header.render());
    }
  });
  return Router;
});

当我点击about链接时，我在控制台中一无所获。我做错了什么？

Backbone通过将事件范围界定到视图el来将事件委派给jQuery，但您只使用视图来呈现HTML，而从不使用其容器元素。看见http://jsfiddle.net/398Gr/例如

如果您想利用Backbone，请处理视图中元素的插入

var Header = Backbone.View.extend({
    template: headerTemplate,
    render: function() {
      this.$el.html(this.template());
      return this;
    },
    events: {
      'click #about': 'about'
    },
    about: function() {
      console.log("Clicked About");
    }
});

并用el集合实例化：

main: function() {
  var header = new Header({el: '#header'});
  header.render();
}

还有一个演示http://jsfiddle.net/398Gr/1/

相关文章：