Knockout If demo

by vyshniakov

HTML

<select data-bind="options: cars, optionsText: 'carType', value: selectedCar,optionsCaption: 'Select...'"></select>
<br/>

<div data-bind="with: selectedCar">
    <div data-bind="if: carType() == 'Car 1'" id="car1Fields">
        <input type="text" data-bind="value: car1field1" />
        <input type="text" data-bind="value: car1field2" />
    </div>
    <div data-bind="if: carType() == 'Car 2'" id="car2Fields">
        <input type="text" data-bind="value: car2field1" />
        <input type="text" data-bind="value: car2field2" />
        <input type="text" data-bind="value: car2field3" />
    </div>
    <div data-bind="if: carType() == 'Car 3'" id="car3Fields">
        <input type="text" data-bind="value: car3field1" />
    </div>
</div>

JavaScript

var data = [new Car('Car 1'),new Car('Car 2'),new Car('Car 3')];
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");
}

function ViewModel(data)
{
    var self = this;
    
    self.cars = ko.observableArray(data);
    self.selectedCar = ko.observable();    
}

var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);