Knockout Computed Observable with parameters

Question

Is it possible to provide a computed observable an extra parameter?

For example, something like this:

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    var self = this;
    this.fullName = ko.computed(function(separator) {
       return self.firstName() + ' ' + self.lastName();
    }, this);
};

And then in the html:

<div data-bind="text: fullName(' - ')"></div>

My actual use case is far more complicated, but this is essentially what I'm trying to achieve, pass in a value in the html which is used as part of the computed function.

Failing this is there a way to make a ordinary function which takes parameters behave like a (computed) observable?

score 23 · Accepted Answer · edited Jun 18 '14 at 06:23

23

You can create a function, which returns an computed variable. You can try something like this.

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    var self = this;
    this.fullName = function(separator){
    return ko.computed(function () {
            return self.firstName() + separator + self.lastName();}, this);
};
};

<div data-bind="text: ViewModel.fullName('-')"></div>

edited Jun 18 '14 at 06:23

ioseph

1,887
20
25

answered Jun 18 '14 at 06:11

Anuraj

18,859
7
53
79

1

closures to the rescue! – ioseph Jun 18 '14 at 06:22
Perfect. Take this solution if you're looking for something else than `writable computed observables`. – Sebastien Jul 25 '18 at 13:18
Huge help! Thanks. – DavidHyogo Jul 12 '19 at 02:13

score 0 · Answer 2 · answered Jun 30 '20 at 14:15

If the viewModel is fairly static, this solution might help. However, if firstName e.g. changes, fullName will NOT be updated because fullName is a function without subscribers.

You could use another observable for seperator and use this observable in the computed fullName. Then fullName WILL be updated when either firstName, seperator or lastName changes.

But that will not work in the original scenario either. Looking for an answer myself...

Knockout Computed Observable with parameters

2 Answers2