Binding with multiple parameters in knockout

[Jens Hoffmann]

Hi,

I have a little question. 

I have a select element and I would like to disable options depending on the stock. 

Is it possible to access multiple parameters in the function (setOptionDisable)?

This example (See Link: http://knockoutjs.com/documentation/options-binding.html) 

doesn't work for my right know, because I have only one ObservableArray and not two nested ViewModels. 

<select data-bind="options: $parent.optionsArr, value: Product.chosenCount, optionsAfterRender: $parent.setOptionDisable($data, PRODUCT)"></select>

in Viewmodel: 

self.setOptionDisable = function (htmlElement, product) { // With more than one parameter it doensn't work

if (parseInt(htmlElement.innerText) > self.getStockValueProduct(product.stock)) {

htmlElement.disabled = true;

}

else {

htmlElement.disabled = false;

}

};

best regards,

jens 

[Jens Hoffmann]

Today I tried this (see below), but it didn't work either. At least I got the values in my viewmodel.

HTML: 

<select class="optiontest" data-bind="options: $parent.optionsArr, value: Product.chosenCount, optionsAfterRender: $parent.setOptionDisable($element, $data)"></select>

ViewModel: 

    self.setOptionDisable = function (htmlElement, product) {

        if (product.Product.stock == undefined) {

            htmlElement[0].disabled = true;

        }

        else {

            if (parseInt(htmlElement[0].innerText) > self.getStockValueProduct(product.Product.stock)) {

                htmlElement.disabled = true;

            }

            else {

                htmlElement.disabled = false;

            }

        }

    };

Error: 

Uncaught TypeError: Unable to process binding "options: function (){return $parent.optionsArr }"

Message: Cannot call method 'apply' of undefined knockout-3.0.0.js:1079:33

  ko.dependencyDetection.ignore knockout-3.0.0.js:1079:33

  callback knockout-3.0.0.js:3162:40

  ko.utils.setDomNodeChildrenFromArrayMapping knockout-3.0.0.js:4095:17

  ko.bindingHandlers.options.update knockout-3.0.0.js:3166:18

  ko.dependentObservable.disposeWhenNodeIsRemoved knockout-3.0.0.js:2601:33

  evaluateImmediate knockout-3.0.0.js:1467:99

  ko.dependentObservable knockout-3.0.0.js:1567:9

  (anonymous function) knockout-3.0.0.js:2599:28

  ko.utils.arrayForEach knockout-3.0.0.js:101:17

  applyBindingsToNodeInternal knockout-3.0.0.js:2571:22

  applyBindingsToNodeAndDescendantsInternal knockout-3.0.0.js:2446:37

  applyBindingsToDescendantsInternal knockout-3.0.0.js:2428:13

  applyBindingsToNodeAndDescendantsInternal knockout-3.0.0.js:2455:13

  applyBindingsToDescendantsInternal knockout-3.0.0.js:2428:13

  applyBindingsToNodeAndDescendantsInternal knockout-3.0.0.js:2455:13

  applyBindingsToDescendantsInternal knockout-3.0.0.js:2428:13

  applyBindingsToNodeAndDescendantsInternal knockout-3.0.0.js:2455:13

  applyBindingsToDescendantsInternal knockout-3.0.0.js:2428:13

  applyBindingsToNodeAndDescendantsInternal knockout-3.0.0.js:2455:13

  applyBindingsToDescendantsInternal knockout-3.0.0.js:2428:13

  applyBindingsToNodeAndDescendantsInternal knockout-3.0.0.js:2455:13

  ko.applyBindings knockout-3.0.0.js:2657:9

  (anonymous function) knockout-3.0.0.js:3647:24

  invokeForEachNodeInContinuousRange knockout-3.0.0.js:3598:13

  activateBindingsOnContinuousNodeArray knockout-3.0.0.js:3645:13

  activateBindingsCallback knockout-3.0.0.js:3757:13

  ko.utils.setDomNodeChildrenFromArrayMapping knockout-3.0.0.js:4095:17

  ko.dependencyDetection.ignore knockout-3.0.0.js:1079:33

  ko.dependentObservable.disposeWhenNodeIsRemoved knockout-3.0.0.js:3774:36

  evaluateImmediate knockout-3.0.0.js:1467:99

  evaluatePossiblyAsync knockout-3.0.0.js:1429:13

  ko.subscribable.fn.notifySubscribers knockout-3.0.0.js:1021:38

  observable.valueHasMutated knockout-3.0.0.js:1111:79

Thank you in advance for your help. 

[Rachel Silver]

Are you just trying to remove the options  from the select element's available options? If so you could do a computed that returns a filteredArray for the options binding.

Perhaps I'm not understanding what you're trying to do?

[Winston Fassett]

You are invoking the setOptionDisable inside the binding, and it returns null, which means it's not actually getting wired up as the render callback, causing the error.  If you want to pass your parameters in here, your function needs to return another function that will be wired up as the post-render callback.  

Maybe something like this:

optionsAfterRender: $parent.optionDisablerFor($data, product)

And in your view model:

self.optionDisablerFor = function($data, product){
    return function(option, val){      
        option.disabled = val > $data.getStockValueProduct(product.stock) ? true : false;
    }
}