Backbone.js从视图内的视图触发事件

Question

无法让下面的代码工作。

我正在尝试从具有自己的事件对象的渲染子视图中触发事件。

是否可以轻松地完成这项工作？

var SubView = Backbone.View.extend({
    events: {
      'click .subview-item a': 'test'
    },
    el: '#subview',
    test: function() {
      console.log('please print this...');
    },
    initialize: function() {
      this.template = '<div class="subview-item"><a href="#">Clickable Subview</a></div>'
    },
    render: function(){
      $(this.el).html(_.template(this.template));
      return this;
    }
});

var MainView = Backbone.View.extend({
    el: $('#content'),
    initialize: function(){
      this.template = '<h1>Hello</h1><div id="subview"></div>';
      this.subView = new SubView();
    },
    render: function(){
      $(this.el).html(_.template(this.template));
      this.subView.render();
      return this;
    }
});

var mainView = new MainView({});
mainView.render();

任何想法??

Answer 1

当您在subView MainView内创建initialize时，您的DOM中尚不存在#subview元素，因为您还没有渲染MainView。因此，在 DOM之外创建了一个新的<div> 。您需要先创建MainView，然后再创建SubView。你可能在MainView render()内做到这一点，但我认为以下更简单：

var SubView = Backbone.View.extend({
    events: {
        'click .subview-item a': 'test'
    },
    el: '#subview',
    test: function() {
        console.log('please print this...');
    },
    initialize: function() {
        this.template = _.template('<div class="subview-item"><a href="#">Clickable Subview</a></div>');
    },
    render: function() {
        this.$el.html(this.template);
        return this;
    }
});

var MainView = Backbone.View.extend({
    el: $('#content'),
    initialize: function() {
        this.template = _.template('<h1>Hello</h1><div id="subview"></div>');
    },
    render: function() {
        this.$el.html(this.template);
        return this;
    }
});

var mainView = new MainView();
mainView.render();
var subView = new SubView();
subView.render();

还冒昧地纠正了一些事情，例如使用this.$el并在initialize()上创建模板，而不是在每个render()上重新编译。