KO dynamically change tempalte

by vyshniakov

HTML

<select data-bind="options: Attributes, optionsText: 'AttributeName', optionsValue: 'Id', optionsCaption: 'Select Attribute...',value :SelectedAttribute"></select>
<!-- ko if: SelectedAttribute -->
<div data-bind="template: { name: SelectedAttribute() }"></div>
<!-- /ko -->

<div id="template1" style="display:none">Template 1</div>
<div id="template2" style="display:none">Template 2</div>
<div id="template3" style="display:none">Template 3</div>

JavaScript

function Attribute(name, id){
    var self = this;
    
    self.AttributeName = ko.observable(name);
    self.Id= ko.observable(id);    
}

function ViewModel(){
    var self = this;
    
    self.Attributes = ko.observableArray();
    self.SelectedAttribute = ko.observable();    
    
    // Adding test data.
    self.Attributes.push(new Attribute("1", "template1"));
    self.Attributes.push(new Attribute("2", "template2"));    
    self.Attributes.push(new Attribute("3", "template3"));    
}

ko.applyBindings(new ViewModel());