Idea is to change template on button click.
So, here is small example.
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/index.js"></script>
<script type="text/javascript" src="/knockout-3.2.0.js"></script>
</head>
<body onload="DoApply()">
Persons:
<script type="text/html" id="father-template">
<button data-bind="text: name, click: myClick"></button>
</script>
<script type="text/html" id="childrens-template">
<span data-bind="text: name, click: myClick"></span>
</script>
<span data-bind="template: {name: getTemplate, foreach: myNames}"></span>
</body>
</html>
JS:
function MyViewModel() {
var self=this;
self.myNames = [
{name: 'Stanko', template: ko.observable('father-template')},
{name: 'Milosev', template: ko.observable('childrens-template')}
]
self.name = "test";
self.fatherName = ko.observable("father-template");
self.childrenName = ko.observable("childrens-template");
self.template = ko.observable("childrens-template");
myClick=function() {
this.template() == "childrens-template" ? this.template("father-template") : this.template("childrens-template")
//this.template("childrens-template");
};
self.getTemplate = function(data) {
return data.template();
}
}
function DoApply() {
ko.applyBindings(new MyViewModel());
}
Example download from here.