- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4636
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: 4478
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: 4780
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: 4819
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.