Ember.js 将参数从视图传递到控制器函数答案

【问题标题】：Ember.js passing parameters from views to controller functionsEmber.js 将参数从视图传递到控制器函数
【发布时间】：2012-07-09 21:25:39
【问题描述】：

我有一个 Ember.js 应用程序如下（借用自 andyMatthews.net 上的this article）：

查看：

<script type="text/x-handlebars" >
    {{view App.UserTextField}}
    {{#each App.recentUsersArray.reverse tagName="ul"}}
        <li>{{this}}</li>
    {{/each}}
</script>

应用：

App = Ember.Application.create();

App.UserTextField = Ember.TextField.extend({
    insertNewline: function(){
        var term = this.get('value');
        App.recentUsersArray.pushObject(term);
    }
});

App.recentUsersArray = Em.ArrayController.create({
    content: ['noelle', 'evan', 'mason'],
    reverse: function(){
        return this.get('content').toArray().reverse();
    }.property('content.@each').cacheable(),
});

但我想从视图中向 App.recentUsersArray.reverse 传递一个参数（例如，设置要返回的反转项目的数量）。我遇到了一个问题，因为虽然您可以接受控制器函数上的参数，但您似乎无法从视图中传递它。如果您想将参数 3 传递给控制器上的反向函数，我正在想象这样的事情：

{{#each App.recentUsersArray.reverse(3) tagName="ul"}}
   <li>{{this}}</li>
{{/each}}

但它会引发错误（未捕获的错误：解析错误）...想法？最终目标是创建三个<ul>，每个都有不同数量的元素而不为每个长度创建不同的函数（即App.recentUsersArray.reverseThree()、App.recentUsersArray.reverseFive()等） .我也不想制作三个不同的控制器，因为每个 <ul> 应该使用相同的数据源，只是切片不同。

【问题讨论】：

您必须先了解计算属性的工作原理，然后才能理解为什么您要求的内容没有意义。

标签： javascript ember.js

【解决方案1】：

是的，Ember 可以作为一种奇怪的范式出现。也许试试：

App.recentUsersArray = Em.ArrayController.create({
  recentCount: 3
  content: ['noelle', 'evan', 'mason'],
  reverse: function(){
      var max = this.get('recentCount');
      return this.get('content').reverse().slice(0, max)
  }.property('content.@each', 'recentCount').cacheable(),
});

//some event handler
App.recentUsersArray.set('recentCount', count)

我不认为toArray() 是必要的，而且文档说它不能保证返回元素的顺序： http://docs.emberjs.com/#doc=Ember.Enumerable&method=.toArray&src=false

【讨论】：