10

クラスで状態を切り替えたいボタンのセットがありますactive。ボタンが 1 つしかない場合は、クラスをコントローラー プロパティにバインドactiveし、クリック ハンドラーでそのプロパティを切り替えます。

<button {{action 'toggle'}} class="{{active}}">model.title</button>

actions: {
  toggle: function() {
    this.set('active', true);
  }
}

しかし、私は複数のボタンを持っているので、何をバインドできるかわかりません。クリックされたボタンへの参照をアクション ハンドラに渡すことができれば便利ですが、これを行う方法がわかりません。

{{#each item in model}}
  <button {{action 'toggle' referenceToButton}}>model.title</button>
{{/each}}

actions: {
  toggle: function(buttonReference) {
    // add `active` class to buttonReference
  }
}

これを達成するための最良の方法は何ですか？

4

4 に答える 4

16

投稿者は彼が望んでいた答えを得ましたが、元の質問の意図であると私が信じていることへの答えを投稿すると思いました:

アクションからクリックされたDOM要素への参照を取得するには? 私はその質問に対する答えを探してここに来ましたが、見つかりませんでした。

実際の要素を取得する方法が見つかりませんが、次の方法でルート ビュー要素 (テンプレートで定義された要素をラップする) を取得できますthis。

テンプレート：

<button {{action 'toggle' this}}>model.title</button>

コントローラー、ビュー、コンポーネント:

actions: {
  toggle: function(event) {
    // Get element (as in the return value of document.getElementById(id))
    var viewElements = event.element;
    var elementsInTemplate = viewElements.children;
    var button = viewElements.getElementsByTagName('button');
    //also can use getElementsByClassName, use jQuery etc.
  }
}
于 2015-04-14T01:02:44.763 に答える
5

ボタンではなく、渡したいのはモデル項目ではありませんか?

次に、トグルは、ボタン クラスにバインドするアイテムに属性を設定するだけです。

{{#each item in model}}
  <button {{bind-attr class="item.isActive:active"}} {{action 'toggle' item}}>model.title</button>
{{/each}}

actions: {
  toggle: function(item) {
    item.set('isActive', true);
  }
}
于 2015-04-07T09:33:05.033 に答える
0

active物件紹介ができますitems

{{#each item as |model|}}
  <button {{action 'toggle' model}} class={{if model.active 'active'}}>{{model.title}}</button>
{{/each}}

if active=truethenactiveクラスがボタンに適用されます。

actions: {
  toggle: function(buttonReference) {
    buttonReference.set('active', true);
  }
}

質問のタイトルに答えるにはPass a reference of the clicked DOM element to the action handler in Ember。

1.コンポーネントを使用している場合は、このイベント名のリストのいずれかをコンポーネントで定義でき、ネイティブeventオブジェクトを受け取るように設計されています。例えば。、 {{my-button model=model}}

export default Ember.Component.extend({
 click(event){
  //oncliking on this componen will trigger this function
  return true; //to bubble this event up
 }
})

2.次のようなhtmlタグを使用している場合はbutton、(クロージャー)アクションをインラインイベントハンドラーに割り当てる必要があります。

{{#each item as |model|}}
      <button onclick={{action 'toggle' model}}>{{model.title}}</button>
{{/each}}

アクションでは、ハッシュ関数は常に最後の引数としてtoggleネイティブ ブラウザー オブジェクトを受け取ります。event

actions:{
 toggle(model,event){

 }
}

この<button {{action 'toggle' model}}>{{model.title}}</button>形式では、アクションはオブジェクトをtoggle受け取りません。event

emberガイドで非常によく説明されています https://guides.emberjs.com/v2.12.0/components/handling-events/#toc_sending-actions

于 2017-04-28T06:43:36.787 に答える