1

我正在使用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);
  }
});

列表显示

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中的完整代码

感谢您的帮助。

4

2 回答 2

1

您应该使用计算属性提前过滤数组，该属性使用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

于 2013-05-29T14:39:20.800 回答
1

另请查看在常见情况下有用的Ember 过滤器属性，并且只是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>
于 2013-05-28T23:20:42.983 回答