筛选Ember.ListView中的某些元素.JSfiddle里面

Filter certain elements in Ember.ListView. JSfiddle inside

本文关键字：元素 JSfiddle 里面 Ember ListView 筛选      更新时间：2023-09-26

我使用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

完整代码

还可以看看Ember filter属性在常见情况下是有用的，只是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>

您应该使用使用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>
更新JSFiddle

相关文章：