To clone an observableArray you would want to do: var viewModel = { array1: ko.observableArray([“one”, “two”]), array2: ko.observableArray() }; viewModel.clone = function() { viewModel.array1(viewModel.array2.slice(0)); }; If you want to just do a copy, then you would do: viewModel.array1(viewModel.array2()); The problem with the second example is that the underlying array is the same, so pushing to … Read more
If the only purpose of your computed observable is to do a simple binding against it, then using a function would be equivalent. Bindings are implemented inside of a computed observable to track the dependencies, so it will re-trigger your binding when any of the observables change. Here are a few things to consider about … Read more
$index is an observable. So you need to use it this way : <span data-bind=”text: ($index() + 1)”> </span>
The bindingContext is a possibility, but only for passing data from init to update the first time that the binding is triggered. The next time that update fires it would no longer be there. There are really two choices for where to store this type of state: 1- On the element, as you stated. You … Read more
There are a couple of ways that you can handle a situation like this one. You can either choose to address it through bindings or push it into your view model. If your view model is created by the mapping plugin and you don’t want to get into customizing the way that it is created, … Read more
No need for a custom binding, just use knockout’s keypress event(Knockout docs): <input type=”text” data-bind=”textInput : keyword, event: {keypress: onEnter}” > </input> And your function: that.onEnter = function(d,e){ e.keyCode === 13 && that.search(); return true; }; JSFiddle example EDIT: New binding from knockout(3.2.0) : textInput – obviates the need to have a valueUpdate binding.
There are a few directions that you could go with this one. One option is to call ko.applyBindings with distinct view models against separate DOM elements like: var viewModelA = { name: “Bob” }; var viewModelB = { price: 50 }; ko.applyBindings(viewModelA, document.getElementById(“aContainer”)); ko.applyBindings(viewModelB, document.getElementById(“bContainer”)); http://jsfiddle.net/9abgxn8k/ In this case, you would want to make sure … Read more
KnockoutJS observable arrays offer a sort function, this makes it relatively easy to sort a databound array in your UI (regardless of the natural order of the data.) data-bind=”foreach: items.sort(function (l, r) { return l.lastName() > r.lastName() ? 1 : -1 })” You should not have to pre-sort/re-sort your source data, if you’re sorting before … Read more
I think “Note 2” on this knockout page explains it all: http://knockoutjs.com/documentation/click-binding.html You can avoid the problem by either using: Anonymous functions: <button data-bind=”click: function(data, event) { myFunction(data, event, ‘param1’, ‘param2’) }”>Click me</button> … or … The bind method: <button data-bind=”click: myFunction.bind($data, ‘param1’, ‘param2’)”>Click me</button>
Here’s a simple trick. Just make your root element initially hidden and set the visible binding to true. <div style=”display: none;” data-bind=”visible: true”> <!– the rest of your stuff –> </div> As it’s rendered, before knockout does its thing, it will be initially hidden. When the bindings are applied, knockout will override the style and … Read more