在 child 视图中获取 Backbone parent 查看事件

Question

我有一个 parent 视图，在 parent html 中我正在渲染一个 child 看法。 Child 单击放置的按钮可重复视图在 parent html 内。但是我没有得到里面的按钮点击事件 child 查看事件，因为按钮 html 在 parent html 内。如何在 child 视图中获取点击事件？

JS:

var parView = Backbone.View.extend({ 
  template: _.template($('#par').html()),
  initialize: function(){
    this.render();
  },
   render: function () {
        this.$el.html(this.template);
        new childView({el:'#repeatable-child-sectn'});
        return this;
    }
});
var childView = Backbone.View.extend({ 
  template: _.template($('#child').html()),
  events: {
    'click #button': 'addChild'
  },
  initialize: function(){
    this.render();
  },
   render: function () {
        this.$el.html(this.template);
        return this;
    },
    addChild: function(){
      $('#repeatable-child-sectn').append(this.template);
    }
});

HTML:

<script type="text/template" id='par'>
  <div id='par'>
    <div id='repeatable-child-sectn'></div>
    <div id='button'>Add Child</div>
  </div>
</script>
<script type="text/template" id='child'>
  <div>Child Section</div>
</script>

我们可以在 child 视图中获取 parent 事件吗？

Answer 1

我会采取稍微不同的方法并通过让父视图监听 'add child' 按钮点击以及管理实例化和附加子视图来简化事情：

var ParentView = Backbone.View.extend({
  template: _.template($('#par').html()),
  events: {
    'click #button': 'addChild'
  },
  initialize: function() {
    this.childViews = []; // keep track of childviews in case they need to be removed, etc.
  },
  render: function() {
    this.$el.html(this.template);
    return this;
  },
  addChild: function() {
    var childView = new ChildView();
    this.childViews.push(childView);
    this.$('#repeatable-child-sectn').append(childView.$el);
  }
});
var ChildView = Backbone.View.extend({
  template: _.template($('#child').html()),
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(this.template);
    return this;
  }
});

JSFiddle：https://jsfiddle.net/9jms89n2/

在 child 视图中获取 Backbone parent 查看事件

Getting Backbone parent view events inside child view

javascript

delegates

bind

backbone.js