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 を使用していますが、モデルがどのように見えるべきか正確にはわかりません。車種ごとにモデルを用意する必要がありますか、それともすべての構造に対して 1 つのモデルを用意する必要がありますか? モデルを使用してフィールドの可視性を制御するにはどうすればよいですか (car 2 を選択した場合、car1Fields を表示したくありません)。

4

1 に答える 1

0

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を使用できます。IfVisible

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

これが実際の例です：http://jsfiddle.net/vyshniakov/66AAY/

于 2012-10-25T07:36:08.777 に答える