- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4427
In this article I want to show example of with binding, buttondown and buttonup (useful for touchscreens, but in that case you will use touchstart, touchend).
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/myButtons.js"></script>
<script type="text/javascript" src="/index.js"></script>
<script type="text/javascript" src="/knockout-3.2.0.js"></script>
</head>
<body onload="doTheApply()">
<span data-bind="template: { name: 'myTemplate'}"></span>
<script type="text/html" id="myTemplate">
<div data-bind="with: myButtons">
<div data-bind="event: {mousedown: down}">I will be executed on mouse down</div>
<div data-bind="event: {mouseup: up}">I will be executed on mouse up</div>
</div>
</script>
</body>
</html>
Here notice with: myButtons.
myButtons.js:
window.myWithButtonsModel = window.myWithButtonsModel || {};
(function(ns) {
ns.myWithButtonsModel = function() {
var myButtons = new Button();
function Button() {
return {
down: function() {
console.log("Hi, I am called on button down event.");
},
up: function() {
console.log("Hi, I am called on button up event.");
}
}
}
return {
myButtons: myButtons,
}
}
}(window));
Here notice how I introduced method myButtons
index.js:
function doTheApply() {
model = new window.myWithButtonsModel();
ko.applyBindings(model);
}
And here notice how applied model, this is basically same as from knockout example.
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4900
One simple example of custom binding.Â
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> <div data-bind="myBinding: myObservable">Click me</div> </body> </html>
JS:
ko.bindingHandlers.myBinding = {
init: function (element, valueAccessor) {
element.addEventListener("click", iWasClicked, false);
function iWasClicked() {
alert("I was clicked");
}
}
}
window.onload = function() {
ko.applyBindings();
}
Init part will be always executed from ko.bindingHandlers.myBinding, and inside that method I implemented function iWasClicked.
Binding looks like this: data-bind="myBinding: myObservable" where myObservable actually I don't need.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4637
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: 4479
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.