Thursday, October 3, 2013

nesting of computed properties in knockoutjs

I am trying to use one computed properties into another computed properties which use toUpperCase function to show string in UPPERCASE .


so here is my HTML

<p><input data-bind="value: firstName"></p>

<p><input data-bind="value: lastName"></p>

<p><input data-bind="value: fullName"></p>

<p> <span data-bind="text: upperFullName"> </span> </p>
And ViewModel is as follow : 

 function AppViewModel() {
    var self = this; 
    self.firstName = ko.observable('rahul');
    self.lastName = ko.observable('sharma');
    self.fullName = ko.computed(function() {
      return self.firstName() +' ' + self.lastName();
    });
    self.upperFullName = ko.computed(function() {
      return self.fullName().toUpperCase();
    });  
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 
JS FIDDLE LINK 

simple example of computed properties in knockoutjs

Here is html for binding of computed properties 
<p><input data-bind="value: firstValue"></p>

<p><input data-bind="value: secondValue"></p>

<p><input data-bind="value: addValue"></p>

 and out model , we are using here in our model computed properties of knockout js which will be always reacts to change in the properties on the basis of this property is computed. so any change in firstValue or secondValue will also change the result of addValue computed properties. 
function AppViewModel() {
    var self = this; 
    self.firstValue = ko.observable(6);
    self.secondValue = ko.observable(5);
    self.addValue = ko.computed(function() {
      return parseInt(self.firstValue()) + parseInt (self.secondValue());
    });
}

// Activates knockout.js
ko.applyBindings(new AppViewModel()); 
and here is js fiddle link 

simple example of how can you use observable to bind html text

Here is code for your html part
First name:

Last name:




this is for your ViewModel which you can use . The noticeable part here is i have used observable instead of using just plain JavaScript strings . so now when any changes made to those properties , changes will also refelect in your model . 
function AppViewModel() {
    this.firstName = ko.observable("Rahul");
    this.lastName = ko.observable("Sharma");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 
Here is output window screen and link of js fiddle 




simple example of knockoutjs of data binding



   


This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Rahul";
    this.lastName = "Sharma";
}
// Activates knockout.js
ko.applyBindings(new AppViewModel()); 

and here is your output screen and link of js fiddle