- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4139
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.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4061
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: <span data-bind="template: {name: 'persons-template', foreach: people}"></span> <script type="text/html" id="persons-template" > <h3 data-bind="text: name"></h3> </script> </body> </html>
JS:
function MyViewModel() { this.people = [ {name: 'Stanko'}, {name: 'Milosev'} ] } function DoApply() { ko.applyBindings(new MyViewModel()); }
Download from here.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4293
Title is taken from here. I just wanted to write my small example of template binding for future reference.
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="doTheApply()"> Here is example from knockout: <span data-bind="template: { name: 'person-template', data: buyer}"></span> <script type="text/html" id="person-template"> <h3 data-bind="text: name"></h3> <p>Credits: <span data-bind="text: credits"></span></p> </script> </body> </html>
JS:
myViewModel = { buyer: {name: "Franklin1", credits: 450} } function doTheApply() { ko.applyBindings(myViewModel); }
Example download from here.
---
Another example:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/knockout-3.2.0.js"></script> </head> <body> My template: <script type="text/html" id="myTemplate"> <input data-bind="attr: {type: inputType}" placeholder="I am going to be changed"> </script> <span data-bind="template: {name: 'myTemplate', data: {inputType: 'search'}}"> </body> <script type="text/javascript"> ko.applyBindings(); </script> </html>
Here notice line:
<span data-bind="template: {name: 'myTemplate', data: {inputType: 'search'}}">
As you can see, $data I bind directly in the template definition.
---
One example with radio buttons:
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/knockout-3.2.0.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> <span data-bind="template: { name: 'myRadioButtons', foreach: myRadioButton }"></span> <script type="html/text" id="myRadioButtons"> Test: <input type="radio" data-bind="checked: myValue"><p/> </script> </body> </html>
JS:
var myRadioButtonViewModel = { myRadioButton: [ {myValue: 1}, {myValue: 2} ] } window.onload = function () { ko.applyBindings(myRadioButtonViewModel); }
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4257
Title taken from here. For my example I did it with input.
Html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/knockout-3.2.0.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body onload="ko.applyBindings(viewModel)"> <input type="checkbox" placeholder="I am a test" data-bind="click: inputClick"></input> </body> </html>
JS:
var viewModel = { inputClick: function() { alert("just clicked input"); return true; } }
Here note return true. Without that state will not change (i.e. if for input you write type="checkbox")
Download from here.