Blog



  • 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.

     

     

     

     

     

     

Tags: Knockoutjs