javascript - Ember.js 连续计算属性的正确语法

Question

我的 Controller 中有以下代码。它首先根据搜索属性过滤一组结果，然后对结果进行排序。

results: function() {

    var searchTerm = this.get('searchTerm'),
        results = this.get('content');

    if (searchTerm) {
      results = results.filter(function(item) {
        return item.get('name').toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
      });
    }

  }.property('content', 'searchTerm', ),

sortedResults: Ember.computed.sort('results', 'sortProperties'),
    
sortProperties: function() {
    var order = this.get('ordering');
    if (order === 0) {
      return ['name:asc'];
    } else if (order === 1) {
      return ['name:desc'];
    }
  }.property('ordering'),

模板循环排序结果:

{{#each sortedResults as |job|}}
    {{job-table-row model=job}}	
{{/each}}

以上效果很好。我想最终将排序结果服从切片函数以显示有限数量的结果。我尝试过以下方法:

slicedResults: function() {
    var sortedResults    = this.get('sortedResults');
    return sortedResults.slice(0,10);
}.property('sortedResults'),

然后循环 slicedResults:

{{#each slicedResults as |job|}}
    {{job-table-row model=job}} 
{{/each}}

在这种情况下，不会返回任何结果。在切片函数中使用排序结果然后将结果输出到模板的正确方法是什么？

Answer 1

我们使用array.[]计算属性的一种更高效的方式。

slicedResults: function() {
    var sortedResults    = this.get('sortedResults');
    return sortedResults.slice(0,10);
}.property('sortedResults.[]')

这真的很有帮助blog post关于数组计算属性之间的差异。