web-dev-qa-db-ja.com

Emberアクションからのクリック伝播を停止しますか?

アイコン編集スパンがクリックされると、モーダルを開くアクションが発生するというこのコードがありますが、同時に、クリックはその下のビュー(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}}
16
Jaime

また、bubbles=falseパラメータをactionタグに追加することもできます。イベントの伝播を構成する方法については、 APIドキュメント を参照してください。

39
undeletable

アクションを変更してみてください:

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

これは同じような状況で私のために働いた

6
undeletable

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
    }
})
1
Jaime