2016-04-23 10 views
0

私はRactiveを使用しています。最初の選択リストは、ユーザーが自分の国を選択できるようにします。彼らが "US"を選択すると、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}} 

このフォームを最初に読み込むと、デフォルトで「カナダ」が選択されます。ユーザーが「US」を選択すると、状態リストがうまく表示されます。しかし、 "selected_state"の値をチェックしようとすると、状態リストの最初の状態ではなく空に設定されます。私は手動で状態を変更した後、 "selected_state"値を状態値として表示します。

手動イベントによってトリガされる変更イベントを待つ必要がありますか、または状態リストがレンダリングされると直ちに最初のイベントに基づいて自動的に値が更新されるようにする方法がありますか状態が表示されますか?レンダリング時にすべての選択リストに対してチェンジ・イベントをトリガする必要はありません。

答えて

0

これは、updateModelを使用したダーティチェックが必要であることが判明しています。選択フィールドが変更された場合、インスタンスのupdateModelを呼び出すイベントがトリガーされ、selected_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中:

更新選択したコード

、その後this.updateModelを(実行している国への更新のためのモデルを観察する)だけでなく、単に実行しているなどがあります

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

    this.updateModel(); 

}); 

代替ソリューションより効率的な必要なkeypathのupdateModel

詳細については、 http://docs.ractivejs.org/latest/ractive-updatemodel

関連する問題