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

Name Type Default Description
parameter any undefined The intial "commited value"

Members

Name Type Default Description
committedValue observable<any> value passed to constructor The value marked as comitted this is done by calling commit

Functions

Name Return Type Description
commit undefined Mark the current value as safe and set commitedValue with the value.
reset undefined Revert the value to the commited value.

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

Name Type Default Description
parameter array undefined The intial "commited value"

Members

Name Type Default Description
committedValue observable<array> value passed to constructor The value marked as comitted this is done by calling commit

Functions

Name Return Type Description
commit undefined Mark the current value as safe and set commitedValue with the value.
reset undefined Revert the value to the commited value.

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

Name Type Default Description
fields string array ['name', 'description', 'id'] The default fields the comparer will use when filtering objects
comparer func (query, item) The default comparer does a simple string contains on strings and for objects does a recursive call on the properties listed in the fields array

Members

Name Type Description
all observableArray an array of all the items, excludes filtering and sorting
query observable<any> Value used to filter the array. By default query needs to be a string for the default comprarer but if you override the comprarer it can be anything.
isSorting observable<boolean> is there a sort funcation beging applied
isFilterableArray boolean marks the object as a filterableArray
length number Alwasy zero, just used to mark the object as an array. To get the length evaluate the observable

Functions

Name Description
clearSort clear the sort function being applied
sortByString(propName) Sort the array using the specified property on the object. Sorted as a string.
sortByStringDesc(propName) Sort the array descending using the specified property on the object. Sorted as a string.
sort(func) Takes a sort function to be applied and stored. Pass it a standard array sort function.
base array functions exposed
pop remove last item from array
push add item to the end of the array
reverse reverse the order of the array
splice removes and returns a given number of elements starting from a given index
shift remove the first item in the array
unshift add item to the beginning of the array
slice returns the selected elements in an array, as a new array object
replace replace and item
indexOf get the index of an item
destroy destroy an Item
destroyAll destroy all or many items
remove remove an item
removeAll remove all or many items
anchor link to top of page