Wednesday, May 7, 2014

Important change in the databinding mechanism


Imagine you have an object:

var customerData = {
  _id: 1,
  getId: function () { return 1; },
  getActualId: function () { return this._id; }
}

If you want to bind the textbox to it, previously you had 2 options:

1. Trivial case: bind to _id property

{
  "type": "textbox",
  "name": "idTextBox",
  "label": "Id",
  "bindsTo": "_id"
}

2. More interesting: bind to getid property

{
  "type": "textbox",
  "name": "idTextBox",
  "label": "Id",
  "bindsTo": "getId"
}

Support for binding to functions was added to support ko.observables. And since getId returns the constant value, it worked. However, binding to getActualId was not useful, because it is using 'this', but was called as a function.

Now you have an option number 3:

{
  "type": "textbox",
  "name": "idTextBox",
  "label": "Id",
  "bindsTo": "getActualId"
}

Because now to retrieve the value getActualId will be called as a method of customerData object.


As a reminder, only the last property the control binds to can be a function.

So given the object like this:

var customerData = {
 _id: 1,
 getId: function () { return this._id; },
 _address: {
  _street: "Via Roma",
  getStreet: function () { return this._street; },
 }
 getAddress: function () { return this._address; },
};

You can bind to "_address.getStreet", but you cannot bind to "getAddress.getStreet"

Hope it helps.

No comments:

Post a Comment