视图中 ui 定义的范围

Question

哪个是正确的？
以下代码在
内单击 .my-button 时运行 clickedButton a) 整个文档
b) 只有 #my-element

如果答案是 a)。 b) 怎么做？

var MyView = Marionette.ItemView.extend({
  el: '#my-element',

  ui: {
    button: '.my-button'
  },

  events: {
    'click @ui.button': 'clickedButton'
  },

Answer 1

答案正好是B。在BackboneJS的delegateEvents中，给元素绑定事件的时候有DOM的作用域，代码如下：

this.$el.on(eventName, selector, method);

你可以运行这样： HTML 是

<button class="my-button">Click Me - 1</button>
<div id="my-element">
  <p>Hello World</p>
  <button class="my-button">Click Me - 2</button>
</div>

脚本是

var MyView = Marionette.ItemView.extend({
  el: '#my-element',

  template: false,

  ui: {
    paragraph: 'p',
    button: '.my-button'
  },

  events: {
    'click @ui.button': 'clickedButton'
  },

  clickedButton: function(evt) {
    console.log('I clicked the button ['+$(evt.target).html()+']!');
  }
});

视图中 ui 定义的范围

scope of ui definitions in View

marionette