Ember 2选择依赖

时间:2015-02-03 16:51:32

标签: javascript select ember.js

我正在尝试在ember中的两个选择框之间创建依赖关系。 我找到了旧版本的ember的解决方案: http://jsbin.com/cibonulora/1/edit

但是对于新版本以及带有json + rest的完整模型,我似乎无法使其正常工作。 http://jsbin.com/jumiwogugi/4/edit?html,js,console,output

当我在复选框中选择一个项目时,它应该过滤第二个上的元素。但没有任何反应。

由于

我的代码:

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
    setupController : function(controller, model) {
        this._super(controller, model);
      controller.set('producttypes', this.store.find('producttype'));
    }
});





App.ProducttypesController = Ember.Object.create({
  content: null
});

App.ProductsubtypesController = Ember.Object.create({
  content: null
});


App.ProductsubtypeController = Ember.ArrayController.extend({
  active: function() {
    alert(""); }.property("App.selectedProductType.content").cacheable()
});







//model

App.Producttype = DS.Model.extend({
    name: DS.attr(),
});

App.Productsubtype = DS.Model.extend({
    name: DS.attr(),
});

var producttypes = {
  "producttypes":[
    {"id":1,"name":"type1"},
    {"id":2,"name":"type2"},
    {"id":3,"name":"type3"}   
  ]  
};
var productsubtypes = {
  "productsubtypes":[
    {"id":4,"name":"type4","type_id":"1"},
    {"id":5,"name":"type5","type_id":"1"},
    {"id":6,"name":"type6","type_id":"3"}   
  ]  
};

$.mockjax({
    url:  '/producttypes',
    dataType: 'json',
    type: 'get',
    responseText: producttypes
});
$.mockjax({
    url:  '/productsubtypes',
    dataType: 'json',
    type: 'get',
    responseText: productsubtypes
});

1 个答案:

答案 0 :(得分:0)

我找到了解决问题的方法。

控制器:

App.IndexController = Ember.Controller.extend({
  selectedProductTypeChanged: function(){
    var obj = this.get('selectedProductType');     
    if (obj != null) { 
      console.log(typeof obj.id);
       var unfiltered=this.get('productsubtypes');
    var filtered=this.get('productsubtypes').filterProperty("producttype",obj.id);
     this.set('filterproductsubtypes',filtered );
      this.set('selectedProductSubType',null);
    }    
  }.observes('selectedProductType')
});

链接到jsbin:http://jsbin.com/juvokacuno/3/edit?html,js,output