Question

我正在使用Ember.ListView集合。我试图通过这个jsfiddle来模拟我的问题：http://jsfiddle.net/aQ4UB/。我只会显示与某个布尔条件匹配的元素。但我在车把过滤。 因此我得到了空白。

这是一个简单的片段。 控制器定义

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    var content = [];
    for (var i = 0; i < 100; i++) {
        if(i%2 == 0) // simulate a certain condition of visibility
            content.push({  name: "Item " + i, isVisible:true  });
        else
            content.push({  name: "Item " + i, isVisible:false  });
    }
    controller.set('content', content);
  }
});

的ListView

App.ListView = Ember.ListView.extend({
  height: 500,
  rowHeight: 50,
  width: 500,
  itemViewClass: Ember.ListItemView.extend({
                                                    // handlebar
     template: Ember.Handlebars.compile('{{#if isVisible}}{{name}}{{/if}}'),
  })
});

输出

Item 0

    <------------------- "Blank" element

Item 2

    <------------------- "Blank" element

Item 4

jsfiddle

中的完整代码

感谢您的帮助。

Answer 1

另请参阅Ember filter property在常见情况下非常有用，并且filter()

App = Ember.Application.create();

App.IndexController = Ember.ArrayController.extend({
  content:null,
    filteredItems : function(){
         var filteredItems = [] ;
        var items = this.get('content');
        if(items.length)
            for(var i=0; i<items.length; i++){
                if(items[i].item % 2 == 0)
                    filteredItems.push(items[i]);
            }
       return filteredItems;
    }.property('content')
});

App.ListView = Ember.ListView.extend({
  height: 500,
  rowHeight: 50,
  width: 500,
  itemViewClass: Ember.ListItemView.extend({
      template: Ember.Handlebars.compile('{{item}}'),
  })
});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
      var content = [{item : 1},{item : 2},{item : 3},{item : 4},{item : 5},{item : 6}];
      controller.set('content', content);
  }
});

<script type="text/x-handlebars" data-template-name="index">
  {{collection App.ListView contentBinding="controller.filteredItems"}}
</script>

Answer 2

您应该使用计算属性提前过滤数组，并使用Ember.Array rejectProperty()。

App.IndexController = Ember.Route.extend({
    filteredContent: function() {
      return this.get('content').rejectProperty('isVisible', false);
    }.property('content.@each')
});

现在，如果您访问filteredContent，它将是一个仅包含isVisible设置为true的项目的数组。把手将是：

JS：

template: Ember.Handlebars.compile('{{name}}'),

车把：

<script type="text/x-handlebars" data-template-name="index">
  {{collection App.ListView contentBinding="filteredContent"}}
</script>

Updated JSFiddle

过滤Ember.ListView中的某些元素。 JS里面的

2 个答案: