web-dev-qa-db-ja.com

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"}}のようなもの。

それは可能ですか？

javascriptember.jshandlebars.js
19
Panagiotis Panagi

実際のビューからより多くの部分にアクセスできるようになるので、私はこれに沿ってもっと何かを考えていました。しかしザック、これがあなたが探しているものではない場合、あなたが正確に何をしようとしているのかをもう少し説明できたら？

App = Ember.Application.create();

App.peopleController = Ember.ArrayController.create({
    content: [ { name: 'Roy', url: '#' },
               { name: 'Mike', url: '#' }, 
               { name: 'Lucy', url: '#' } ]
});

App.PersonView = Ember.View.extend({
    tagName: 'li',
    content: null,
    linkClicked: function() {
        console.log(this.getPath('content.name'));
    }
});
<ul>
{{#each App.peopleController}}
    {{#view App.PersonView contentBinding="this"}}
        <a {{bindAttr href="content.url"}} {{action "linkClicked" on="click"}}>
            {{content.name}}
        </a>
    {{/view}}
{{/each}}
</ul>
5
Roy Daniels

どうやら、Emberは現在進化しており、アクションにパラメータを渡す機能があります：

{{action "functionName" parameter}}

あなたの場合、それは次のようになります：

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

ただし、名前ではなく、モデルから任意の属性（idなど）を渡すことができます。

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

17
lauhub

APIによると 複数のパラメーターで渡すことができます。

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);
},

このjsbinの動作を確認してください

14
HaoQi Li

サブビューから、データ属性をアタッチし、コントローラーでそれらにアクセスできます。

たとえば、ビューで次の場合：

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

次に、コントローラーで

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

Veebの回答を改善しました。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');
    ...
}
0
lacorbeille