如何使用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的帮助器传递参数？

回答

相关问题