- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 3779
In custom bindings you can pass whole object, parse it and later use it, also you can pass a function (like observable for example).
HTML
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="/knockout-3.3.0.js"></script> <script type="text/javascript" src="/index.ko.extension.js" defer></script> <script type="text/javascript" src="/index.js" defer></script> </head> <body> <div data-bind="myBind: {propertyOne: testOne, propertyTwo: testTwo}"></div> </body> </html>
Here notice part:
<div data-bind="myBind: {propertyOne: testOne, propertyTwo: testTwo}"></div>
Now index.js:
/*global window, ko*/ function MyLog(msg) { function doTheLog(msg) { console.log(msg); } return { doTheLog: doTheLog } }; window.doSomething = new MyLog(); window.testOne = "test one"; window.testTwo = "test two"; ko.applyBindings();
Here notice that I have created global variables testOne and testTwo, I need them for binding.
index.ko.extension.js:
/*global ko, console*/ /*jslint unparam: true*/ ko.bindingHandlers.myBind = { init: function (element, valueAccessor) { "use strict"; var myObjExample = ko.unwrap(valueAccessor()); doSomething.doTheLog(myObjExample.propertyOne); doSomething.doTheLog(myObjExample.propertyTwo); } }; /*jslint unparam: false*/
Here notice:
var myObjExample = ko.unwrap(valueAccessor());
With that I am actually parsing my object.
Unit test looks like this:
/*global describe, it, expect, beforeEach, ko, window, document, $*/ describe("my bind", function () { "use strict"; var sut; beforeEach(function () { //'<div data-bind="myBind: {propertyOne: testOne, propertyTwo: testTwo}"></div>' var myDiv = document.createElement('div'); myDiv.setAttribute("data-bind", "myBind: {propertyOne: testOne, propertyTwo: testTwo}"); document.body.appendChild(myDiv); window.testOne = "test one"; window.testTwo = "test two"; window.doSomething = jasmine.createSpyObj('MyLog', ['doTheLog']); ko.applyBindings(); }); it("gets object from value acessor", function () { expect(window.doSomething.doTheLog).toHaveBeenCalled(); }); });
Example download from here.
---
Actually, better unit test looks like:
/*global describe, it, expect, beforeEach, ko, window, document*/ describe("my bind", function () { "use strict"; var sut, testOne, testTwo; beforeEach(function () { var myDiv = document.createElement('div'); testOne = jasmine.createSpy("testOne"); testTwo = jasmine.createSpy("testTwo"); myDiv.setAttribute("data-bind", "myBind: {testOne: testOne, testTwo: testTwo}"); document.body.appendChild(myDiv); window.doSomething = jasmine.createSpyObj('MyLog', ['doTheLog']); ko.applyBindings({testOne: testOne, testTwo: testTwo}); }); it("gets object from value acessor", function () { expect(window.doSomething.doTheLog).toHaveBeenCalled(); }); });
Notice first my binding:
myDiv.setAttribute("data-bind", "myBind: {testOne: testOne, testTwo: testTwo}");
Then the apply bindings:
ko.applyBindings({testOne: testOne, testTwo: testTwo});
Version with this test download from here.
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4071
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: 3875
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: 4322
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.