Skip to content

Instantly share code, notes, and snippets.

@jeremija
Last active December 15, 2015 14:13
Show Gist options
  • Save jeremija/96980c6cda322c51b4f3 to your computer and use it in GitHub Desktop.
Save jeremija/96980c6cda322c51b4f3 to your computer and use it in GitHub Desktop.
<!-- updating input will update automatically update span -->
<input type="text" data-bind="value: observable">
<span data-bind="text: observable"></span>
<!-- iterate over observableArray -->
<ul data-bind="foreach: observableArray">
<li data-bind="text: $data"></li>
</ul>
<input type="text" data-bind="value: x">
<input type="text" data-bind="value: y">
<button data-bind="click: add">+</button>
<button data-bind="click: subtract">-</button>
<Calc params="x: myX, y: myY, result: myResult"></Calc>
ko.bindingHandlers.myValue = {
init: function(element, valueAccessor) {
if (!ko.isObservable(valueAccessor())) return;
var observable = valueAccessor();
function update() { observable(element.value); }
element.addEventListener('change', update);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
element.removeEventListener('change', update);
});
},
update: function(element, valueAccessor) {
element.value = ko.unwrap(valueAccessor()) || '';
}
};
ko.bindingHandlers.yourBindingName = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called when the binding is first applied to an element
// Set up any initial state, event handlers, etc. here
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// This will be called once when the binding is first applied to an element,
// and again whenever any observables/computeds that are accessed change
// Update the DOM element based on the supplied values here.
}
};
function fcn(params) {
function add() {
return params.x + params.y;
}
return {
x: params.x,
y: params.y,
add: add
};
}
function fcn({ x, y }) {
const add = () => x + y;
return {x, y, add};
}
// create an observable with default value
var name = ko.observable('John');
// get the current value
name() // returns 'John'
// set a new value
name('James')
// get the value again
name() // returns 'James'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment