- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4578
One example of progress bar, where value of the progress bar will be changed from another file, and also, example of multiple view models.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div data-bind="with: window.SM.Bootstrapper.myModel">
<progress data-bind="attr: {max: myProgress.progressMax, value: myProgress.progressValue}"></progress>
<button data-bind="click: myClickMe.clickMe">Click Me!</button>
</div>
<script type="text/javascript" src="lib/knockout-3.3.0.js"></script>
<script type="text/javascript" src="js/sm.namespaces.js"></script>
<script type="text/javascript" src="js/sm.progress.js"></script>
<script type="text/javascript" src="js/sm.clickme.js"></script>
<script type="text/javascript" src="js/sm.bootstrapper.js"></script>
</body>
</html>
Here notice line:
<div data-bind="with: window.SM.Bootstrapper.myModel">
Namespaces:
/*global window*/
window.SM = window.SM || {};
window.SM.Bootstrapper = window.SM.Bootstrapper || {};
window.SM.Progress = window.SM.Progress || {};
window.SM.ClickMe = window.SM.ClickMe || {};
sm.progress.js:
/*global window, ko*/
(function (ns) {
"use strict";
function Progress() {
var self = this;
self.progressValue = ko.observable(10);
self.progressMax = ko.observable(100);
}
ns.Progress = Progress;
}(window.SM));
sm.clickme.js:
/*global window*/
(function (ns) {
"use strict";
function ClickMe() {
var self = this;
self.clickMe = function () {
ns.Bootstrapper.myModel.myProgress.progressValue(100);
};
}
ns.ClickMe = ClickMe;
}(window.SM));
sm.bootstrapper.js:
/*global ko, window, myProgress*/
(function myBootStrap(ns) {
"use strict";
var init = function () {
var myClickMe = new window.SM.ClickMe(),
myModel,
myProgress;
myProgress = new window.SM.Progress();
myModel = {
myProgress: myProgress,
myClickMe: myClickMe
};
ns.Bootstrapper.myModel = myModel;
ko.applyBindings(myModel);
};
ns.Bootstrapper = {init: init};
}(window.SM));
window.SM.Bootstrapper.init();
Here notice line:
ns.Bootstrapper.myModel = myModel
with that line I created myModel global variable which belongs to Bootstrapper namespace, and because it is global I can use it in binding as I showed at beginning.
Example download from here, or see it in action:
---
One more example. Javascript part will remain same, only HTML part will look like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span data-bind="template: {name: 'myParentProgressTemplate'}"></span>
<span data-bind="template: {name: 'myParentClickTemplate'}"></span>
<script type="text/html" id="myProgressTemplate">
<progress data-bind="attr: {max: progressMax, value: progressValue}"></progress>
</script>
<script type="text/html" id="myClickTemplate">
<button data-bind="click: clickMe">Click Me!</button>
</script>
<script type="text/html" id="myParentProgressTemplate">
<span data-bind="template: {name: 'myProgressTemplate', data: myProgress}"></span>
</script>
<script type="text/html" id="myParentClickTemplate">
<span data-bind="template: {name: 'myClickTemplate', data: myClickMe}"></span>
</script>
<script type="text/javascript" src="lib/knockout-3.3.0.js"></script>
<script type="text/javascript" src="/js/sm.namespaces.js"></script>
<script type="text/javascript" src="/js/sm.progress.js"></script>
<script type="text/javascript" src="/js/sm.clickme.js"></script>
<script type="text/javascript" src="/js/sm.bootstrapper.js"></script>
</body>
</html>
Here notice "parent" template, I name it like this, because that template will take class to which other classes belong to, in my case that is like myClickMe.clickMe, or myProgress.progressMax, it these cases "parent" classes are myClickMe and myProgress. So, notice data: myClickMe and data: myProgress.
Example download from here.
- 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.