How to Create your Custom Binding using knockout js
Posted By : Rajan Rawat | 02-Dec-2016
Creating custom bindings
In Knockout's interpretation of MVVM, bindings are what join your view and viewmodel together. Bindings are the intermediaries; they perform updates in both directions:
- Bindings notice viewmodel changes and correspondingly update the view's DOM
- Bindings catch DOM events and correspondingly update viewmodel properties
Knockout has a flexible and comprehensive set of built-in bindings (e.g., text, click, foreach), but it's not meant to stop there - you can create custom bindings in just a few lines of code. In any realistic application you'll find it is ver to encapsulate common UI patterns inside bindings, so those patterns can trivially be reused in multiple places. For example, this website uses custom bindings to encapsulate its approach to dialogs, draggable panes, code editors, and even to render the text you're reading (it's written in markdown).
OK, let's create some of our own
EXAMPLE OF CUSTOM BINDING
HTML
<html>
<head>
<script type='text/javascript' src='knockout-3.4.0.js'></script>
<script type='text/javascript' src='work.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h3 data-bind="text: question"></h3>
<p>You can only distribute<b data-bind="text: pointsBudgett"></b> points between for following options.</p>
<table>
<thead><tr><th>Options</th><th>Points</th></tr></thead>
<tbody data-bind="foreach: answerss">
<tr>
<td data-bind="text: answerTextt"></td>
<td><select data-bind="options: [1,2,3,4,5], value: points"></select></td>
</tr>
</tbody>
</table>
<h3 data-bind="visible: pointsUsedd() > pointsBudgett">All the points are used by you dont have any points. now please remove some points</h3>
<p>You've got <b data-bind="text: pointsBudgett - pointsUsedd()"></b> Number of point you have.</p>
<button data-bind="enable: pointsUsedd() <= pointsBudgett, click: save">Done</button>
<script>
ko.applyBindings(new SurveyViewModel("Which factors affecting choice of technology?", 10, [
"How much it costs me",
"How often i use it",
"how much i know about it",
"how much i need it"
]));
</script>
</body>
</html>
JS CODE
function Answer(text) {
this.answerTextt = text;
this.points = ko.observable(1);
}
function SurveyViewModel(question, pointsBudgett, answerss) {
this.question = question;
this.pointsBudgett = pointsBudgett;
this.answerss = $.map(answerss, function(text) { return new Answer(text) });
this.save = function() { alert('To do') };
this.pointsUsedd = ko.computed(function() {
var total = 0;
for (var i = 0; i < this.answerss.length; i++)
total += this.answerss[i].points();
return total;
}, this);
}
OUTPUT
Which factors affecting choice of technology?
You can only distribute10 points between for following options.
| Options | Points |
|---|---|
| How much it costs me |
| How often i use it |
| how much i know about it |
| how much i need it |
All the points are used by you dont have any points. now please remove some points
You've got -2 Number of point you have.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.