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., textclickforeach), 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.

 

 

 

 

 

 

About Author

Author Image
Rajan Rawat

Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.

Request for Proposal

Name is required

Comment is required

Sending message..