我的knockout.js模型應該如何？

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/