Question

64

Knockoutjs computed passing parameters

rated 0 times [ 67] [ 3] / answers: 1 / hits: 40803 / 12 Years ago, sat, november 3, 2012, 12:00:00

I am wondering if it is possible with knockoutjs to pass arguments when binding.

I am binding a list of checkboxes and would like to bind to a single computed observable in my viewmodel. In my viewmodel (based on parameter passed to the read function) I want to return true/false based on certain conditions.

var myViewModel=function(){

    this.myprop=ko.computed({read: function(){

    //would like to receive an argument here to do my logic and return based on argument.

}

});

};



<input type=checkbox data-bind=checked: myprop(someval1) />

<input type=checkbox data-bind=checked: myprop(someval2) />

<input type=checkbox data-bind=checked: myprop(someval3) />

Any suggestions?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ednakarolinal

Add To Favorites

Follow

Total Points: 187

Total Questions: 106

Total Answers: 118

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 12 Years ago dominickmackenziet · Accepted Answer

Create a function whose sole purpose is to return a computed observable. It may take in parameters as you wanted. It will have to be a separate computed observable if you want it to be a two-way binding.

Then in your binding, call that function with the appropriate arguments. The computed observable it returns will be bound to in your view and will update as usual.

Here's a fiddle where I used this technique for creating event handlers. You can do something similar here.

You can keep it clean by making the function a method on the observable. Either by adding to the ko.observable.fn prototype or adding it directly to the observable instance.

ko.observable.fn.bit = function (bit) {

    return ko.computed({

        read: function () {

            return !!(this() & bit);

        },

        write: function (checked) {

            if (checked)

                this(this() | bit);

            else

                this(this() & ~bit);

        }

    }, this);

};

// or

function ViewModel() {

    this.flags = ko.observable(0);



    this.flags.bit = function (bit) {

        return ko.computed({

            read: function () {

                return !!(this() & bit);

            },

            write: function (checked) {

                if (checked)

                    this(this() | bit);

                else

                    this(this() & ~bit);

            }

        }, this);

    }.bind(this.flags);

}

Then apply to your view

<input type=checkbox data-bind=checked: flags.bit(0x1)/>

<input type=checkbox data-bind=checked: flags.bit(0x2)/>

<input type=checkbox data-bind=checked: flags.bit(0x4)/>

<input type=checkbox data-bind=checked: flags.bit(0x8)/>

Demo

However if you are just trying to bind all those checkboxes to a single value in your view model, you don't need to do that. Use the checked binding on an array in your view model and give your checkboxes a value. Every checked value will be added to the array. And it will be a two way binding.

<input type=checkbox data-bind=checked: checkedValues, value: 1/>

<input type=checkbox data-bind=checked: checkedValues, value: 2/>

<input type=checkbox data-bind=checked: checkedValues, value: 3/>

<input type=checkbox data-bind=checked: checkedValues, value: 4/>

var viewModel = {

    checkedValues: ko.observableArray([])

};

Demo