如何使用Ember.js的幫助器傳遞參數？

我有一個項目列表：如何使用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"}}。

是否有可能，以及如何？

來源

2012-02-07 Panagiotis Panagi

目前還不能辦法做你想要什麼，我會認爲這樣做沒有按」很正確。我知道這只是你嘗試做的一小段代碼，但你不需要將'name'屬性（或任何關於此事的）傳遞給你的行爲。目標應該是列表中的當前視圖。你可以提供一個jsFiddle，也許可以解釋一下你試圖解決什麼問題？ – 2012-02-07 18:37:31

可以從API http://stackoverflow.com/a/18473842/551811 – BraveNewMath 2013-08-28 05:48:22

我在想的東西沿此線以上，因爲你必須通過一個實際的觀點獲得了一批更多。但是扎克，如果你能解釋一下你想要做什麼，如果這不是你想要的？

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

來源

2012-02-08 00:29:22

這裏做答案我看到了解決方案，在SO的某個地方（由Katz回答）。據我所知，你必須創建一個單獨的視圖* *每個*元素，你想跟蹤事件（點擊，焦點等）。我對麼？我也發現這拉https://github.com/emberjs/ember.js/pull/451，不知道這是我在找什麼。 – 2012-02-08 08:05:09

我在[先前的回答]（http://stackoverflow.com/questions/8870785/positional-index-in-ember-js-collections-iteration/）中解釋了它，是的你是正確的。使用常規視圖渲染非常大的列表會有一些性能問題（我相信#collection助手正在被折舊的原因之一）。但是，如果你看看我的解決方案，我將子視圖更改爲一個Metamorph視圖，該視圖幾乎消除了#collection和#each助手之間的性能差異。無論如何，這是你可能應該這樣做的方式。我不會太擔心這個要求。 – 2012-02-08 13:10:12

我在這個答案中創建了一個jsfiddle的版本，這個版本與Ember 1.0兼容和慣用。隨時更新你的答案，這個鏈接，羅伊：http://jsfiddle.net/tL4Xt/ – 2013-09-03 03:10:08

-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'); 
    ... 
}

來源

2012-02-07 22:37:07 Veebs

從子視圖，您可以將數據的屬性，並在控制器中訪問它們。

例如，在你看來，如果您有：

{{#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. 
    } 
}

來源

2012-04-26 18:18:36 Rajat

-1

到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'); 
    ... 
}

來源

2013-01-25 10:24:01 lacorbeille

顯然，Ember現在已經發展了，並且有能力將參數傳遞給a ction：

{{action "functionName" parameter}}

在你的情況，這將是：

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

然而，你可以傳遞的，而不是名稱從模型（如ID）的任何屬性。

查看http://emberjs.com/guides/templates/actions/瞭解更多信息。

來源

2013-08-14 12:29:12 lauhub

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

來源

2013-08-27 19:25:51

從Ember 1.0版本開始，這個JSBin不再運行。你可能想要更新它@HaoQu李 – 2013-09-03 02:59:34

如何使用Ember.js的幫助器傳遞參數？

回答

相關問題