Question

我正处于一个涉及Ember的小项目中。这是我第一次使用这个框架，到目前为止还不是一个简单的学习：（

现在我遇到了处理嵌套数组的麻烦。我想要做的是非常标准（至少看起来那样）：我有项目，项目类别和类别类型（只是一种组织它们的方式）。

这个想法是有复选框（类别）允许我过滤网页中显示的项目。另一方面，有复选框（类型）允许我一次检查多个catgories。

为了实现这一点，我已经定义了一条路线（我从这些模型中检索了所有数据）和一个控制器。最初，我只有物品和类别。在这种情况下，我会观察过滤器（类别）中的更改，如下所示：categories.@each.isChecked然后显示项目选择。不幸的是，现在层次结构是类型 - >类别，根据文档不可能以相同的方式观察类别的变化：

请注意@each只能深入一级。您不能使用嵌套表单，如todos。@ each.owner.name或todos。@ each.owner。@ each.name。

我谷歌稍微但没有找到太多关于它，所以我现在正在考虑使用类别的自定义视图（一个扩展Ember.Checkbox）并向控制器发送一个事件每当检查或取消选中某个类别时。更多的是＆＃34;手册＆＃34;工作，我猜远不是Ember处理这类事情的方式。

有没有标准的方法呢？

提前感谢您的帮助。

Answer 1

解决此问题的一种方法是观察类别类型和过滤器类别，与观察类别的方式相同。

这是一个例子，

http://emberjs.jsbin.com/naqebijebapa/1/edit

（已假设一对多关系）

<强> HBS

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each catType in catTypes}}

      <li>{{input type="checkbox" checked=catType.isSelected }}{{catType.id}} - {{catType.name}}</li>
    {{/each}}
    </ul>
  <hr/>
  <ul>
    {{#each cat in filteredCats}}

      <li>{{input type="checkbox" checked=cat.isSelected }}{{cat.id}} - {{cat.name}}</li>
    {{/each}}
    </ul>
  <hr/>
    <ul>
    {{#each item in filteredItems}}
      <li>{{item.id}} - {{item.name}}</li>
    {{/each}}
    </ul>
  </script>

<强> JS

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.CategoryType = Em.Object.extend({
  id:null,
  name:null,
  isSelected:true
});

App.Category = Em.Object.extend({
  id:null,
  name:null,
  type:null,
  isSelected:false
});

var catTypeData = [
  App.CategoryType.create({id:1,name:"type1"}),
  App.CategoryType.create({id:2,name:"type2"}),
  App.CategoryType.create({id:3,name:"type3"}),
  App.CategoryType.create({id:4,name:"type4"})
];

var catData = [
  App.Category.create({id:1,name:"cat1",type:catTypeData[1]}),
  App.Category.create({id:2,name:"cat2",type:catTypeData[2]}),
  App.Category.create({id:3,name:"cat3",type:catTypeData[0]})
];

var itemsData = [
  {id:1,name:"item1",cat:catData[0]},
  {id:2,name:"item2",cat:catData[0]},
  {id:3,name:"item3",cat:catData[1]}
];


App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Em.RSVP.hash({catTypes:catTypeData,cats:catData,items:itemsData});
  }
});

App.IndexController = Ember.ObjectController.extend({
  filteredItems:[],
  filterItemsBasedOnCategory:function(){
    var selectedCats = this.get("cats").filterBy("isSelected");
    if(!Em.isEmpty(selectedCats))
    this.set("filteredItems",this.get("items").filter(function(item){
      return selectedCats.contains(item.cat);}));
    else
      this.set("filteredItems",[]);
  }.observes("cats.@each.isSelected"),
  filterCatsBasedOnCategoryType:function(){
    var selectedCatTypes = this.get("catTypes").filterBy("isSelected");
    if(!Em.isEmpty(selectedCatTypes))
    this.set("filteredCats",this.get("cats").filter(function(cat){
      var itContainsIt = selectedCatTypes.contains(cat.type);
      if(!itContainsIt){
        cat.set("isSelected",false);
      }
      return itContainsIt;
    }));
    else
      this.set("filteredCats",[]);
  }.observes("catTypes.@each.isSelected")
});

在Ember控制器中观察嵌套属性

1 个答案: