2. if binding - causing frequent re-renders
<!-- ko if: items().length -->
<h2>Items</h2>
<ul data-bind="foreach: items">
<li data-bind="text: name"></li>
</ul>
<!-- /ko -->
<div data-bind="visible: items().length">
<h2>Items</h2>
<ul data-bind="foreach: items">
<li data-bind="text: name"></li>
</ul>
</div>
VISIBLE only hides/shows the element
Every time IF is TRUE, the Element will re-render
The binding will be triggered every time items().length is being changed,
but is relevant only when length is 0 or 1 …
3. IF binding only when length is 0 or 1 …
Computed observable? (no longer an issue for KO 3.0)
this.items = ko.observableArray();
this.hasItems = ko.computed(function(
{
return this.items().length>0
});
In ko v2.x computed observables will always notify subscribers
when re-evaluated,
even if their value ends up being the same!
this is not true for observables:
[ This is solved in v3.0.0, and computed
observables acts by default like
observables for primitive types:
string/boolean/number/null/undefined ]
this.hasItems = ko.observable(false);
this.items.subscribe(function(newValue)
{
this.hasItems(newValue && newValue.length ? true : false);
}, this);
4. with binding - causing frequent re-renders
<div data-bind="with: selectedItem">
<h2>Selected</h2>
<input data-bind="value: name" />
<input data-bind="value: price" />
</div>
Whenever selectedItem changes, the contents are
re-rendered completely:
Instead of just binding the inputs against the new data,
the entire section is replaced with new elements
<div data-bind="visible: selectedItem">
<h2>Selected</h2>
<input data-bind="value: selectedItem().name />
<input data-bind="value: selectedItem().price />
</div>
<div data-bind="visible: selectedItem">
<h2>Selected</h2>
<!-- ko with: selectedItem -->
<input data-bind="value: name" />
<input data-bind="value: price" />
<!-- /ko -->
</div>
If we do want to use WITH, we
should use it in smaller, targeted
areas
5. Manipulating observableArrays
var ViewModel = function() {
this.items = ko.observableArray(
[ new Item("Task One", "high"), new Item("Task Two", "normal"),
new Item("Task Three", "high") ]
);
this.highPriorityItems = ko.computed(function()
{
return ko.utils.arrayFilter(this.items(), function(item)
{
return item.priority() === "high";
});
};
};
this.addNewData = function(newData) {
var item;
for (var i = 0, j = newData.length; i < j; i++)
{
item = newData[i];
self.items.push(new Item(item.name, item.priority));
}
};
On every push of new item to items,
highPriorityItems will be recalculated!
this.addNewData = function(newData) {
var item, underlyingArray = self.items(); get a reference
for (var i = 0, j = newData.length; i < j; i++) {
item = newData[i];
underlyingArray.push(new Item(item.name, item.priority)); push to referance
}
self.items.valueHasMutated(); notify of a change once!
};
6. Bindings Fire Together(no longer an issue for KO 3.0)
<select data-bind="options: choices,
value: selectedValue,
visible: showChoices">
</select>
In KO there is only one computed observable used to track
all of an element’s bindings (options, value, visible)
Meaning: change in one binding causes to all bindings update
<div data-bind="visible: showPlaylist">
<select data-bind="options: choices, value: selectedValue">
</select>
</div>
Michael Best’s repeat plugin:
<select data-bind="value: selectedOption">
<option data-bind="repeat: {
foreach: items, bind: 'attr: { value: $item().id },
text: $item().name'}">
</select>
Optimizing Select:
<select data-bind="value: selectedValue">
<!– ko foreach: items() -->
<option data-bind="value: id , text: name ">
<!--/ko -->
</select>
IE removes comments between <select> & <option>
7. More Reading:
• Articles:
• knockoutjs-performance-gotcha-1
• knockoutjs-performance-gotcha-2
• knockoutjs-performance-gotcha-3 (not relevant for KO 3.0+)
• Withlight – light WITH binding for observable that won’t change
• Reevaluating computed observables fiddle
• Michael Best’s repeat plugin
