Knockback.js

Knockback.js API and Usage Examples

kb.LocalizedObservable

Used to generate an observable that automatically changes when the kb.LocaleManager's locale changes

Example:

class ShortDateLocalizer extends kb.LocalizedObservable
  constructor: (value, options, view_model) ->
    super; return kb.utils.wrappedObservable(this)
    
  read: (value) -> # return something
  write: (localized_string, value) -> # do something
  
ViewModel = (model) ->
  @localized_date = kb.observable(model, {
    key: 'date',
    "default": this.loading_message,
    localizer: ShortDateLocalizer
  }, @)
  @
view_model = new ViewModel(new Backbone.Model({date: new Date()}))

var ShortDateLocalizer = kb.LocalizedObservable.extend({
  constructor: function(value, options, view_model) {
    kb.LocalizedObservable.prototype.constructor.apply(this, arguments);
    return kb.utils.wrappedObservable(this);
  },
  
  read: function(value) { /* return something */ },
  write: function(localized_string, value) { /* do something */ }
});
var ViewModel = function(model) {
  this.localized_date = kb.observable(model, {
    key: 'date',
    "default": this.loading_message,
    localizer: ShortDateLocalizer
  }, this);
};
var view_model = new ViewModel(new Backbone.Model({date: new Date()}));

Tutorials

kb.LocalizedObservable::extend(properties, [classProperties]) class

Used to derive a class in JavaScript (when CoffeeScript is not used)

Example:

ShortDateLocalizer = kb.LocalizedObservable.extend({
  constructor: (value, options, view_model) ->
    kb.LocalizedObservable.prototype.constructor.apply(this, arguments)
    return kb.utils.wrappedObservable(this)
    
  read: (value) -> # return something
  write: (localized_string, value) -> // do something
  
var ShortDateLocalizer = kb.LocalizedObservable.extend({
  constructor: function(value, options, view_model) {
    kb.LocalizedObservable.prototype.constructor.apply(this, arguments);
    return kb.utils.wrappedObservable(this);
  },
  
  read: function(value) { /* return something */ },
  write: function(localized_string, value) { /* do something */ }
});

constructor([value], [options], [view_model])

Used to create a new instance. For localized observables, creation is often indirect.

Example:

ContactViewModelDate = (model) ->
  @date = kb.observable(model, {key:'date', localizer: LongDateLocalizer}, this)
  @
  
var ContactViewModelDate = function(model){
  @date = kb.observable(model, {key:'date', localizer: LongDateLocalizer}, this)
};

destroy()

Used to release the memory of the object

setToDefault()

Used to return the observable to its default value (if it exists)

resetToCurrent()

Used to return the observable to the value of its target (for example returning an input field to the last good state)

observedValue([value]) dual purpose

Used to get/set the value that the localized observable is changing when the kb.LocaleManager changes

Parameters
  1. value:{ a Knockback or Knockout-derived class }: optional the target that the localized observable synchronizes with on kb.LocaleManager changes