knockoutjs : Computed Observables

  • COMPUTED OBSERVABLES – FUNCTIONS DEPENDENT ON ONE OR MORE OTHER OBSERVABLES.
  • What if you’ve got an observable for firstName, and another for lastName, and you want to display the full
    name? That’s where computed observables come in – these are functions that are dependent on one or
    more other observables, and will automatically update whenever any of these dependencies change.
    Your evaluator function will be called once each time any of its dependencies change, and whatever value you return will be passed on to the observers such as UI elements or other computed observables.

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script src="../lib/knockout-3.2.0.debug.js" type="text/javascript"></script>
    </head>
    <body>
    	<label>Hello </label>
    	<input type="text" data-bind="value: fullName" />
    	<script type="text/javascript">
    		// Here's my data model
    		var viewModel = {
                firstName: ko.observable("Shiv"),
                lastName: ko.observable("Yadav")
            };
            viewModel.fullName = ko.dependentObservable(function () {
                // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                return viewModel.firstName() + " " + viewModel.lastName();
            });
    		ko.applyBindings(viewModel); // This makes Knockout get to work
    		
    		setTimeout(function(){ viewModel.firstName("Shivanshu"); }, 3000);// change data after 3 seconds
    		
    	</script>
    </body>
    </html>
    

    ang4

    After 3 seconds….

    ang5

    knockoutjs : “template” binding

  • Rendering a named template
  • If you want to, you can factor out templates into a separate element and then reference them by name:

    
    <h2>Participants</h2>
    Here are the participants:
    <div data-bind="template: { name: 'person-template', data: buyer }"></div>
    <div data-bind="template: { name: 'person-template', data: seller }"></div>
     
    <script type="text/html" id="person-template">
        <h3 data-bind="text: name"></h3>
        <p>Credits: <span data-bind="text: credits"></span></p>
    </script>
     
    <script type="text/javascript">
         function MyViewModel() {
             this.buyer = { name: 'Franklin', credits: 250 };
             this.seller = { name: 'Mario', credits: 5800 };
         }
         ko.applyBindings(new MyViewModel());
    </script>
    
    

    In this example, the person-template markup is used twice: once for buyer, and once for seller. Notice that the template markup is wrapped in a — the dummy type attribute is necessary to ensure that the markup is not executed as JavaScript, and Knockout does not attempt to apply bindings to that markup except when it is being used as a template.

    knockoutjs : Two way data binding with Observables

  • Two way data binding with Observables
  • Change in data will be reflected in change in template
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script src="../lib/knockout-3.2.0.debug.js" type="text/javascript"></script>
    </head>
    <body>
    	<label>Hello </label>
    	<input type="text" data-bind="value: name" />
    	<script type="text/javascript">
    		// Here's my data model
    		var viewModel = {
    			name : ko.observable("Shiv")
    		};
    		ko.applyBindings(viewModel); // This makes Knockout get to work
    		
    		setTimeout(function(){ viewModel.name("Shivanshu"); }, 3000);// change data after 3 seconds
    		
    	</script>
    </body>
    </html>
    

    ang2

    After 3 seconds…..

    ang3

    knockoutjs : Simple data binding

  • Simple binding with “applyBindings” method.
  • Bind data to template by calling “applyBindings” method.
    Note that it is only one time binding.After that data and template are detached.
    Any change in template or data will not affect each other.
    it’s not really a data binding. Works like template parsing.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script src="../lib/knockout-3.2.0.debug.js" type="text/javascript"></script>
    </head>
    <body>
    	<label>Hello </label>
    	<input type="text" data-bind="value: name" />
    	<script type="text/javascript">
    		// Here's my data model
    		var viewModel = {
    			name : "Shiv"
    		};
    		ko.applyBindings(viewModel); // This makes Knockout get to work
    	</script>
    </body>
    </html>
    

    ang1