使用 JsViews 级联 selects：制作一个 select 观察另一个 select

Question

我的页面上有两个 select 元素，"Make" 和 "Model"。我有一个包含所有模型的大数组，每个模型都有一个 makeId，它对应于 Make select 中项目的值。我正在使用转换器根据 selected Make 填充模型 select 的数据。转换器在页面的初始加载时工作，但当我更改 Make 时它似乎没有改变。如果以任何方式修改 Models 数组，它也会发生变化。有没有办法让 Model select 观察 Make select？我尝试将一个变量传递给包含第一个值的第二个 select，但这并没有导致它观察到变化。这是两个 select 的样子：

<select id="Makes" data-link="selectedMake">
  {^{for ~root.data.Makes}}
    <option value="{{:value}}">{{:text}}</option>
  {{/for}}
</select>

<select id="Models" data-link="selectedModel">
  {^{for ~root.data.Models convert='getModelsForMake' ~make=selectedMake }}
    <option value="{{:value}}">{{:text}}</option>
  {{/for}}
</select>

Answer 1

您需要确保当 selectedMake 更改时，它会触发 {^{for ~root.data.Models convert='getModelsForMake'}} 的刷新。问题是您的转换器 getModelsForMake 转换器依赖于 selectedMake - 但 {^{for}} 标签不 'know that'.

有几种不同的方法可以表明对 selectedMake 的依赖。

声明对 {^{for}} 的依赖：

{^{for ~root.data.Models convert='getModelsForMake' depends='selectedMake'}}

通过添加代码声明对转换器的依赖：

$.views.converters.getModelsForMake.depends = "~root.selectedMake";

将 selectedMake 作为第二个参数传递给 {^{for}}:

{^{for ~root.data.Models selectedMake convert='getModelsForMake'}}

通过在 {^{for}}:

上为 selectedMake 添加 'null check' 来引入依赖

{^{for selectedMake && ~root.data.Models convert='getModelsForMake'}}

顺便说一下，Data-linked <select> elements 的文档中现在包含了级联选择的替代版本。（link 会将您带到相关部分）。

使用 JsViews 级联 selects：制作一个 select 观察另一个 select

Cascading selects with JsViews: Making a select observe another select

jsrender

jsviews