2012-02-07 11 views
19

私が項目のリストを持っている:それをクリックしてオンEmber.jsのアクションヘルパーでパラメータを渡すには?

<ul> 
    {{#each applications}} 
     <li> 
     <a {{bindAttr href="url"}} 
     {{action "appClicked" on="click"}}>     
      {{name}} 
     </a> 
     </li> 
    {{/each}} 
    </ul> 

は、このテンプレートが属する、ビューの方法appClickedを呼び出します。 appClickedメソッドにいくつかの情報(たとえば、アプリケーションの名前)を渡したいと思います。何かのような、{{action "appClicked(name)" on="click"}}

可能でしょうか?

+1

あり、あなたが欲しいものを行う方法は、現在ではありませんし、私は「そうdoesnのやっていることを思うだろう非常に正しい。私はこれがあなたがしようとしているものの小さなスニペットであることを知っていますが、 'name'プロパティ(またはそれに関しては何でも)をあなたのアクションに渡す必要はありません。ターゲットはリスト内の現在のビューでなければなりません。 jsFiddleを提供して、解決したい問題をもう少し説明できますか? –

+0

これはAPIから回答を得ることができますhttp://stackoverflow.com/a/18473842/551811 – BraveNewMath

答えて

5

のようなもの。しかし、ザック、もしこれがあなたが探しているものでないならば、正確に何をしようとしているのかもう少し説明できたら?サブビューから

http://jsfiddle.net/ud3323/4ysxQ/

+0

私はその解決策を、SOのどこかで(Katzによって回答された)どこかに見ました。私が理解しているように、イベントを追跡する(*クリック、フォーカスなど)*すべての*要素について個別のビューを作成する必要があります。私は正しいですか?私もこのプルhttps://github.com/emberjs/ember.js/pull/451、私が探しているかどうかわからないプルを見つけた。 –

+0

私は[以前の回答](http://stackoverflow.com/questions/8870785/positional-index-in-ember-js-collections-iteration/)でも説明しましたが、あなたは正しいです。通常のビューを使用して非常に大きなリストをレンダリングするとパフォーマンスに懸念が生じます(#collectionヘルパーが減価償却されている理由の1つ)。しかし、私のソリューションを見てみると、子ビューをMetamorphビューに変更するだけで、#collectionと#ehe helpersの間のパフォーマンスの差がほぼなくなります。とにかく、これはあなたがおそらくこれを行うべき方法です。私はあまりにも心配していないだろう。 –

+0

私はこの答えで、Ember 1.0と互換性があり慣用であるjsfiddleのバージョンを作成しました。このリンクを使って、あなたの答えを自由に更新してください。Roy:http://jsfiddle.net/tL4Xt/ –

-2

パラメータを<のまたは<の>タグの属性にしてから、jQueryを使用してそのパラメータにアクセスすることができます。

たぶん、あなたは実際のビューを通じてより多くの束にアクセスすることができますので、私はこの線に沿ってより多くの何かを考えていた

// template 
<ul> 
    {{#each applications}} 
    <li> 
     <a {{bindAttr href="url"} param="abc"} 
     {{action "appClicked" on="click"}}>     
     {{name}} 
     </a> 
    </li> 
    {{/each}} 
</ul> 

// In your js code 
appClicked: function (event) { 
    // You may have to play around and check which DOM element 
    // has the the param attribute. From memory it is the parent. 
    var param = this.$().parent().attr('param'); 
    ... 
} 
1

、あなたは、データの属性を添付し、あなたのコントローラでそれらにアクセスすることができます。たとえば、あなたのビューで、あなたが持っている場合

を:あなたのコントローラで次に

{{#view Ember.Button target="App.controller" action="publish" data-publish=false}}Unpublish{{/view}} 

、Veebの答えに

App.controller = Ember.Object.extend({ 
    publish: function(v){ 
    var status = v['data-publish'];//your additional information is appended to the view. 
    } 
} 
-1

改善は、あなたが行うことができますので、あなたはjQueryのイベントを持って覚えています:

// template 
<ul> 
    {{#each applications}} 
    <li> 
     <a {{bindAttr href="url"}} param="abc" {{action "appClicked" on="click"}}> 
     {{name}} 
     </a> 
    </li> 
    {{/each}} 
</ul> 

// In your js code 
appClicked: function (event) { 
    var param = $(event.target).attr('param'); 
    ... 
} 
16

明らかに、Emberは進化しました。明らかに、Emberは進化しました。 ction:あなたのケースでは

{{action "functionName" parameter}} 

、それは次のようになります。

<a {{bindAttr href="url"}} 
    {{action "appClicked" name on='click'}}>     
     {{name}} 
    </a> 

しかし、あなたは、名前の代わりに(IDなど)のモデルから任意の属性を渡すことができます。

詳細については、http://emberjs.com/guides/templates/actions/を参照してください。

14

The API says複数のパラメータを渡すことができます。

HTMLとハンドルバー:

{{officename}} 
<button {{action "actionTest" "hello" "goodbye" officename}}>See parameters through action in the console</button> 

コントローラ:

actionTest: function(a, b, c){ 
    console.log(a); 
    console.log(b); 
    console.log(c); 
}, 

See it in action in this jsbin

+2

Ember 1.0のリリースでは、このJSBinはもう動作しません。 @HaoQu Liを更新したいかもしれません –

関連する問題