Question

我正在使用Ractive并有两个选择列表。第一个选择列表允许用户选择他们的国家。如果他们选择＆＃34; US＆＃34;，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}}

此形式首次加载＆＃34;加拿大＆＃34;默认选中。一旦用户选择＆＃34; US＆＃34;，状态列表显示就好了。但是，如果我尝试检查＆＃34; chosen_state＆＃34;的值，则将其设置为空而不是状态列表中的第一个状态。在我手动更改状态之后，然后才会执行＆＃34; chosen_state＆＃34;值显示为状态值。

我是否必须等待手动事件触发更改事件，或者是否有某种方式使其更新，以便一旦呈现状态列表，它将自动更新它的值在第一个状态显示？在呈现每个选择列表时不必触发更改事件会很好。

Answer 1

事实证明，这需要使用updateModel进行脏检查。我这样做了，如果select字段被更改，它会触发一个事件，该事件调用实例上的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中：

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

    this.updateModel();

});

备用解决方案可能包括观察模型以获取国家/地区的更新，然后运行this.updateModel（）以及在所需的密钥路径上运行updateModel，这样效率更高。

有关此问题的进一步文件可在以下网址找到： http://docs.ractivejs.org/latest/ractive-updatemodel

首次加载选择列表时未设置Ractive值

1 个答案: