Search code examples
ember.jsember-data

cascade select data binding in ember js

I have a following drop down list and have requirement like this: the level2 is loading independently, but level3 will load based on level2, level4 is loading based on level3

enter image description here

I am novice to ember js please help me what is the correct conventional approach to achieve this. (sorry for the bad English)

Solution

  • You should use DS.promiseArrays to make asyncronous computed properties. I wrote down some basic pseudo code. Basically data1 is loaded in route (model hook for instance). data2 is dependant on data1 selection. When it gets selected an async call is fired and data for select2 is retrieved. And this follows troughout the proccess..

    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 (same as previous but uses 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}}