Question

我有这样的代码，当单击图标编辑范围时，它会触发打开模态的动作，但同时，单击会传播到它下面的视图（personView）。我希望动作能够执行并停止传播。

我能想到的唯一解决方案是使图标编辑自己的视图，并通过在方法点击中返回false来停止点击传播。如果没有另外的观点，还有其他方法吗？

HBS：

{{#view Blocks.PersonView}}
  <span class="inline pull-right icon-edit" {{action 'modalOpen' 'modifyPersonPopup' 'modifyPerson' this}}></span>
  <p class="inline pull-left person-name">{{firstNameDelayed}}</p>
{{/view}}

Answer 1

您还可以将bubbles=false参数添加到action代码中。有关如何配置事件传播，请参阅API documentation。

Answer 2

尝试修改操作：

modalOpen: function {
    //code of your action
    return false;    
}

这在类似的情况下对我有用

Answer 3

我能够使用jQuery拦截点击，但逻辑太糟糕了。此逻辑还会阻止操作助手工作。我宁愿继续使用使用余烬视图的解决方案来传播点击。

personView中的令人讨厌的解决方案：

Blocks.PersonView = Ember.View.extend({
  classNames: ['event-person-block', 'person', 'inline'],
  classNameBindings: ['personActive'],
  // Onclick toggles person selection.
  click: function () {
 this.get('controller.parentController').send('personClicked',this.get('controller.content.id'))
  }
didInsertElement: function() {
  this.$().find(".icon-edit").click(function(e) {
    e.stopPropagation()
  })
}

}）

使用包含图标编辑范围的视图的清洁解决方案：

Blocks.EditPersonIcon = Ember.View.extend({
    click: function () {
        return false
    }
})

Answer 4

实现此目的的辛烷值方法是使用 ember-event-helpers 插件中的 db.collection.findOneAndUpdate( { _id: someObjectId, $expr: { $lt: [{ $size: "$players" }, "$maxPlayers"] } }, [ { $set: { players: { $setUnion: ["$players", [newPlayerObjectId]] } } }, { $set: { status: { $cond: { if: { $lt: [{ $size: "$players" }, "$maxPlayers"] }, then: "created", else: "fully-booked" } } } } ], { returnNewDocument: true }) 助手。

stop-propagation

停止点击Ember动作的传播？

4 个答案: