アイコン編集スパンがクリックされると、モーダルを開くアクションが発生するというこのコードがありますが、同時に、クリックはその下のビュー(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}}
また、bubbles=false
パラメータをaction
タグに追加することもできます。イベントの伝播を構成する方法については、 APIドキュメント を参照してください。
アクションを変更してみてください:
modalOpen: function {
//code of your action
return false;
}
これは同じような状況で私のために働いた
JQueryを使用してクリックをインターセプトすることはできましたが、ロジックが厄介すぎます。このロジックは、アクションヘルパーの動作も停止します。クリックを伝播しないようにemberビューを使用するソリューションを使用したいのですが、.
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
}
})