2016-04-23 58 views
0

我正在使用Ractive并有两个选择列表。第一个选择列表让用户选择他们的国家。如果他们选择“美国”,Ractive将检查它并显示用户选择其状态的状态列表。例如:第一次加载选择列表时没有设置Ractive值

<select value="{{country}}"> 
    <option value="CA">Canada</option> 
    <option value="US">USA</option> 
</select> 

{{#if country == 'US'}} 
    <select value="{{chosen_state}}"> 
     {{#states}} 
      <option value="{{this.state_name}}">{{this.state_name}}</option> 
     {{/}} 
    </select> 
{{/if}} 

当此窗体第一次加载时,默认情况下选择“加拿大”。一旦用户选择“美国”,州列表显示得很好。但是,如果我尝试检查“chosen_state”的值,它将设置为空而不是状态列表中的第一个状态。在我手动更改状态之后,只有这样,“chosen_state”值才会显示为状态值。

我是否必须等待手动事件触发的更改事件,或者有什么办法可以使状态列表一出现就会自动更新它的值状态显示?当它被渲染时,不必为每个选择列表触发一个更改事件。

回答

0

事实证明,这需要使用updateModel进行脏检查。我做到了,所以如果选择字段发生了变化,它会触发一个事件,该事件调用实例上的updateModel来脏检查chosen_state字段。

更新所选代码:

<select value="{{country}}" on-change="countrychange"> 
    <option value="CA">Canada</option> 
    <option value="US">USA</option> 
</select> 

{{#if country == 'US'}} 
    <select value="{{chosen_state}}"> 
     {{#states}} 
      <option value="{{this.state_name}}">{{this.state_name}}</option> 
     {{/}} 
    </select> 
{{/if}} 

而且在ractive:

ractive.on('countrychange', function(event) { 

    this.updateModel(); 

}); 

备选方案可能包括观测更新的国家,那么运行this.updateModel(模型)以及刚刚运行更新效率更高的所需keypath上的updateModel。

关于此问题的更多文档可在以下网址找到: http://docs.ractivejs.org/latest/ractive-updatemodel

相关问题