0

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

<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）？

4

1 回答 1

0

您可以为所有汽车类型提供一个模型。只需为其添加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/

于 2012-10-25T07:36:08.777 回答