在ember js中级联选择数据绑定

Question

我有一个以下下拉列表，并且有这样的要求： level2是独立加载的， 但是level3将根据level2加载， level4基于level3加载

我是ember js的新手，请帮助我实现这一目标的正确传统方法。 （抱歉英语不好）

Answer 1

您应该使用DS.promiseArrays来生成异步计算属性。我写下了一些基本的伪代码。基本上data1被加载到路由中（例如模型钩子）。 data2取决于data1选择。当它被选中时，将触发异步调用并检索select2的数据。这跟随着过程......

HBS

 {{select
   data=selectData1 < This is preloaded
   selection=data1}}

JS

select2Data: function() {
    return DS.PromiseArray.create({
       promise: store.query('x/y', { c : data1.get('id') }) < this should resolve to array
    })
}.property('data1') 

HBS

{{#if select2Data.length}}
       {{select
           data=selectData2 < This is based on selection1
           selection=data2}}
{{/if}}

JS（与之前相同但使用data2）

select3Data: function() {
    return DS.PromiseArray.create({
       promise: store.query('x/y', { c : data2.get('id') })  
    })
}.property('data2') 

HBS

 {{#if select3Data.length}}
           {{select
               data=selectData3 < This is based on selection2
               selection=data3}}
 {{/if}}