Question

我有一个选择汽车类型的下拉列表。每辆车都有不同的输入字段，所以我只想显示与所选汽车相关的字段。这是一些代码：

<select>
    <option value="1">car 1</option>
    <option value="2">car 2</option>
    <option value="3">car 3</option>
</select>
<br/>
<div id="car1Fields">
    <input type="text" id="car1field1" />
    <input type="text" id="car1field2" />
</div>
<div id="car2Fields">
    <input type="text" id="car2field1" />
    <input type="text" id="car2field2" />
    <input type="text" id="car2field3" />
</div>
<div id="car3Fields">
    <input type="text" id="car3field1" />
</div>

我正在使用knockout.js，我不知道模型或模型究竟应该是什么样子。我应该为每种车型设置型号，还是为所有结构设置一种车型？如何使用模型控制字段的可见性（选择汽车2时我不想显示car1Fields）？

Answer 1

您可以为所有车型设置单一型号。只需向其添加car type属性：

function Car(type)
{
    var self = this;   

    self.carType = ko.observable(type);

    self.car1field1 = ko.observable("car1field1");
    self.car1field2 = ko.observable("car1field2");

    self.car2field1 = ko.observable("car2field1");
    self.car2field2 = ko.observable("car2field2");    
    self.car2field3 = ko.observable("car2field3");

    self.car3field1 = ko.observable("car3field1");
}

要控制divs的可见性，您可以使用If或Visible绑定：

<div data-bind="if: carType() == 'Car 1'" id="car1Fields">

以下是工作示例：http://jsfiddle.net/vyshniakov/66AAY/

我的knockout.js模型应该如何？

1 个答案: