Classes

trackableObservable

Trackable Observable is an extension on the observable classes, that tracks a committed value that may be reverted. This is useful when creating “edit” forms where a user can either save or cancel out of.

When displaying trackableObservables you will want to bind to the committedValue in displays, and the default value for edits.

    
var form = function(){
  var self = this;
  self.value = ko.trackableObservable("initial commited value");
  self.cancel = function(){
    // reset the value back to the currently committed value
    self.value.reset();
  };
  self.save = fucntion(){
    // commits the current working value
    self.value.commit();
  };
  return self;
};
    
  

Constructor Parameters

Members

Functions

trackableObservableArray

Same as trackableObservable, but instead of extending observable it extends observableArray.

    
var form = function(){
  var self = this;
  self.array = ko.trackableObservableArray([]);
  self.cancel = function(){
    // reset the value back to the currently commited value
    self.array.reset();
  };
  self.save = fucntion(){
    // commits the current working value
    self.array.commit();
  };
  return self;
};
    
  

Constructor Parameters

Members

Functions

filterableArray

Filtering and Sorting are frequently needed UX features and using a filterableArray can make implementing them very simple. filterableArray are somewhat expensive and should not be a replace all solution for observableArray. They should be used only when you need to support filtering and sorting in the UI or even created on the fly when those views needing it are displayed.

    
var filterableListViewModel = function() {
  var self = this;
  // array or observableArray
  self.servers = ko.filterableArray([...], {...});
  // sort by the field we are allowing to start
  self.servers.sortByString('name');
  // track the direction of the sort so we can toggle it
  self.isSortingAsc = ko.observable(true);
  self.sortingIcon = ko.pureComputed(function(){
    return self.isSortingAsc() ? "#icon-angle-up" : "#icon-angle-down";
  });
  self.toggleSortOrder = function(){
    if(self.isSortingAsc())
      self.servers.sortByStringDesc('name');
    else
      self.servers.sortByString('name');
    self.isSortingAsc(!self.isSortingAsc());
  }
  // clear the filtering
  self.clearFilter = function() {
    self.servers.query("");
  }
  return self;
}
    
  

Options

Members

Functions