A working version might look like:
HTML:
<a data-bind="attr: {href: link}">Link</a>
<a href="#" data-bind="click: changeStoreHref">change Link</a>
JavaScript:
function viewModel()
{
var self = this;
self.storeHref = ko.observable(1);
self.link = ko.computed(function() {
return '#someHash/' + self.storeHref();
});
self.changeStoreHref = function() {
self.storeHref(self.storeHref() + 1);
};
}
ko.applyBindings(new viewModel());
Fiddle: http://jsfiddle.net/3DAfQ/6/
The reason for your first problem is that you are returning the result of the call to ko.computed()
and that is a function. Typically you would define a computed which is dependent on other observables and evaluate it via executing it:
var observable = ko.observable(); // this returns a function
var computed = ko.computed(function() { return observable; }); // this also returns a function
console.log(computed()); // logs undefined
observable('hello world'); // that call will update the computed
console.log(computed()); // logs hello world
console.log(computed); // this will log the function itself as in your exemple
The next problem is the binding of your click event handler. You bind data-bind="click: changeStoreHref(20)"
. When the HTML is parsed by ko it executes changeStoreHref(20)
and binds against the result which is undefinded
. And as a side effect, it already sets self.storeHref
to 20.
If you have a scenario where you need to parametrize a click binding then you have to return a function:
HTML:
<a data-bind="attr: {href: link}">Link</a>
<a href="#" data-bind="click: changeStoreHref('test')">change Link</a>
JavaScript:
function viewModel() {
var self = this;
self.storeHref = ko.observable(1);
self.link = ko.computed(function () {
return '#someHash/' + self.storeHref();
});
self.changeStoreHref = function (para) {
return function () {
self.storeHref(para);
}
};
}
ko.applyBindings(new viewModel());
Fiddle: http://jsfiddle.net/dfLaK/1/