Question

我只是想让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链接时，我在控制台中什么都没得到。我做错了什么？

Answer 1

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/

骨干事件哈希不起作用

1 个答案: