如何根据 ember 中同一组件内的选择框值更改切换 div

Question

我是余烬的新手。我有两个div，每个div都有一个选择框。我希望第二个div 根据第一个选择框值的变化进行切换。

第一个带有选择框的 DIV：

        <div class="row row-space">
            <div class="col-sm-10">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon edit_schedule_label" id="sizing-addon3">Schedule Level</span>
                    <div class="recurrence_box">
                        {{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
                    </div>
                </div>
            </div>
        </div>

第二分区：

        {{#if group_level_decider }}
            <div class="row row-space">
                <div class="col-sm-10">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon edit_schedule_label" id="sizing-addon3">Location </span>
                        <div class="recurrence_box">
                            {{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
                        </div>
                    </div>
                </div>
            </div>
        {{/if}}

在控制器中，我观察到第一个选择框的选择绑定的变化，并将条件设置为第二个div 切换。我可以看到这里的条件变量"group_level_decider"被设置为正确的值，但它没有反映在视图中。

控制器：

       group_level_decider : false,
       schedule_level_changed: function() {
          var model = this.get('store');
          model.set('selected_schedule_level',this.get('default_schedule_level.value'))
          model.set('group_level_decider',true)
       }.observes('default_schedule_level')

请帮助我。谢谢！

Answer 1

下面是根据州过滤城市的示例：

App.IndexController = Ember.ArrayController.extend({
  cities: function(){
    var state = this.get('state');
    var states = this.get('model');
    var cities = [];
    if(state){
      cities = states.filterBy('state', state).get(0).get('cities');
    }
    return cities;
 }.property('state'),
 states: function(){
   return this.get('model').mapBy('state');
 }.property(),
 stateObserver: function(){
   this.set('city', null);
 }.observes('state')
});

然后，在模板中：

States: {{view "select" prompt="Pick State..." content=states value=state}}
Cities: {{view "select" prompt="Pick City..." content=cities value=city }}

工作解决方案在这里