21

ember.js バージョン 0.9.x を使用した個人プロジェクトを更新しています。

そのため、新しいバージョンがリリースされ、ember アクションに関連する問題が発生しました。

次のhtmlコードがあります：

<li><a href="#" id="startApp" {{action activateView target="view"}}> Home</a> <span class="divider">|</span></li>

ここで、この関数の呼び出しをクリックすると activateView:

activateView: function(event, context) {
   console.log(event);              
}

しかし、イベントとコンテキストは定義されていません。私はすでに this.context を試しましたが、未定義を返します。

主なアイデアは、ユーザーがクリックしたときにリンクの ID を取得することです。

ルートとハンドルバーヘルパーのリンクについては知っていますが、他のことのためにそのIDが本当に必要です.

4

6 に答える 6

19

Ember 2 では...

eventアクション内では、DOM 要素を持つJavascript オブジェクトに常にアクセスできます。

actions: {
    myAction() {
        console.log(event.target) // prints the DOM node reference
    }
}
于 2016-08-19T02:08:04.067 に答える
9

イベントは、アクション ヘルパーを使用して渡されません。本当にイベント オブジェクトが必要な場合は、ビューを定義してclickイベントを使用する必要があります。

App.MyLink = Em.View.extend({
  click: function(e) {
  }
});

その後：

<li>{{view App.MyLink}}</li>

ただし、 に引数を渡すことができるため、dom イベントへのアクセスが必要になることはめったにありません{{action}}。あなたの場合：

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

そしてイベントで：

activateView: function(id) {
  console.log(id);              
}
于 2013-05-11T18:03:46.057 に答える
4

eventアクションでオブジェクトを受け取る方法は 2 つあります。

1.コンポーネントを使用している場合は、このイベント名のリストのいずれかをコンポーネントで定義でき、ネイティブ イベント オブジェクトを受け取るように設計されています。例えば。、{{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 タグを使用している場合は、(クロージャ) アクションをインライン イベント ハンドラに割り当てる必要があります。

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

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

actions:{
 toggle(model,event){

 }
}

以下の形式では、アクション トグルはeventオブジェクトを受け取りません。

  • <button {{action 'toggle'}}>{{model.title}}</button>
  • {{input key-press="toggle"やなどの入力ヘルパー{{text-area key-press="toggle"

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

于 2017-05-02T11:32:59.300 に答える
2

ビューでアクセスできるように、IDを関数に渡す必要があります。必要なものを渡すことができますが、例ではこれでうまくいくはずです

html

<li><a href="#" id="startApp" {{action activateView "startApp" target="view"}}> Home</a> <span class="divider">|</span></li>

次に、ビューでIDまたは渡したものにアクセスできます

js

...
activateView: function(data){
  console.log(data); // should be the ID "startApp"
}
...
于 2013-05-11T18:05:17.530 に答える
0

イベントハンドラを直接使用してください。

参考：https ://github.com/emberjs/ember.js/issues/1684

ここに画像の説明を入力

于 2017-03-07T01:15:04.413 に答える