2016-04-23 57 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

相關問題