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

时间:2012-05-18 12:55:59

标签: javascript ember.js

我有一个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(),{{1等等)。我也不想制作三个不同的控制器,因为每个App.recentUsersArray.reverseFive()都应该使用相同的数据源,只是采用不同的方式切片。

1 个答案:

答案 0 :(得分:2)

是的,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