Annotations
|
See elsewhere |
1 |
See footnote |
? |
Optional |
R |
Ruby on Rails |
Viewmodel (JavaScript)
var vm = function(value) {
this.variable = ko.observable(value);
};
ko.applyBindings(new vm('...'), DOM?);
|
Templates (HTML)
<div data-bind=”bindings”>html</div>
|
<!-- ko bindings -->html<!-- /ko -->
|
<script type="text/html" id="T">html</script>
|
MSIEAlways quote if in { 'if': ... } bindings.
Observables
.isObservable()
|
.isWritableObservable()
|
.isComputed()
|
.valueHasMutated()
|
.subscribe(function(v) {}, trg1?, event2?) : s
|
.notifySubscribers(currentvalue)
|
s.dispose() |
1 Default to this.
2 change (default) or beforeChange.
ko.observableArray(array)
() : []1
|
([]) : vm
|
.pop() : item
|
.push(item)
|
.shift() : item
|
.unshift(item)
|
.remove(item)
|
.removeAll()
|
.indexOf(item) : -/#1
|
.reverse()
|
.slice(s, e?) : []
|
.splice(s, l?, …?) : []
|
.sort(function(a, b)? : -/0/+2)
|
.destroy(item)R
|
.destroyAll() R
|
1 Get length: ().length. Get item: ()[index]
ko.computed(function() {})¹
1 Use ko.pureComputed if only observables.
|
|
Appearance bindings
text: string
|
html: string
|
css: { class:bool, …}
|
style: { css:value, …}
|
attr: { attribute:value, … }
|
visible: bool
|
template: string/{}
|
"template" appearance binding
name: string
|
nodes: [DOM, …]
|
data: []
|
if: bool
|
foreach: []
|
as: string
|
afterRender: function([DOM], context)
|
afterAdd: function
|
beforeRemove: function
|
Control flow bindings
foreach: []/{}
|
with: observable
|
if: bool
|
ifnot: bool
|
component: observable
|
"foreach" control flow binding
data: []
|
as: string
|
afterRender: function
|
afterAdd: function
|
beforeRemove: function
|
beforeMove: function
|
afterMove: function
|
includeDestroyedR: bool
|
Form bindings
click: function
|
event: { event: function }
|
submit: function
|
value: string
|
textinput:1 string
|
enable: bool
|
disable: bool
|
hasFocus: bool
|
checked: bool
|
options: []/{}
|
uniqueName: bool
|
1 Updates value on keypress, clipboard, etc.
"options" form bindings
optionsCaption: string
|
optionsText: string
|
optionsValue: string
|
optionsAfterRender: function
|
selectedOptions1: []
|
valueAllowUnset: bool
|
optionsIncludeDestroyedR: bool
|
1 Only for multiple selects.
|
|
Context variables
$root : vm
|
$component : vm
|
$parent : vm
|
$parents[index] : vm
|
$data : vm
|
$rawData : vm
|
$element : DOM
|
$index1 : integer
|
$componentTemplateNodes : DOM array
|
$context : context
|
$parentContext : context
|
1 Only available in foreach loops.
Writable ko.computed(…)
this.value = ko.observable();
this.double = ko.pureComputed({
read: function () { return this.value * 2; },
write: function(v) { this.value(v / 2); },
owner: this?
});
|
Builtin extenders
.extend({ rateLimit: { timeout: milliseconds, method: method1? } })
|
.extend({ notify: 'always' });
|
1 notifyAtFixedRate/notifyWhenChangesStop
Custom extenders
ko.extenders.log = function(target, option) {
target.subscribe(function(newValue) {
console.log(option + ": " + newValue);
});
return target;
};
|
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment