knockoutjs“检查”绑定在Safari和IE中无法正常工作

Question

I have built a pricing calculator for different document types that gives you a final price based on the number of pages, quality and quantity in your document.

The pricing is generated by a service and the data for each request is outputted as a JSON object which is than used on the calculator.

So far everything works well in Chrome or Firefox, but not in Safari or IE. I have been able to narrow down that the issue is with the Quality radio buttons.

The issue is that the pricing in Safari for example, is always incorrect when you use the "Quality" radio buttons. It seems that the first click on the radio button is not firing and you always get the incorrect price.

I've set up an example on jsfiddle with instructions on how to repro the issue: https://jsfiddle.net/IntricatePixels/f21dtr8j/

The example of JSFiddle should have all the details but I'd be happy to provide more info here on this post if necessary.

<div class="form-group document-quality">
    <label>Quality</label>
    <fieldset data-role="controlgroup">
        <div class="field-container" data-bind="foreach:categoryOptions, valueUpdate: 'afterkeydown', event: { change: onSubmit }" id="documentQuality">
            <label class="btn btn-default document-quality-label" data-bind="css: { 'active': $parent.selectedCategoryValue() === value }"></label>
            <div class="radio-container">
                <label class="btn btn-default document-quality-label" data-bind="css: { 'active': $parent.selectedCategoryValue() === value }">
                    <input data-bind="attr: {value: value}, checked: $parent.selectedCategoryValue" id="uniqueQuestionName" name="uniqueQuestionName" type="radio">
                </label>
            </div>
            <label class="btn btn-default document-quality-label" data-bind="css: { 'active': $parent.selectedCategoryValue() === value }"><span data-bind="text: label"></span></label>
        </div>
    </fieldset>
</div>
<div class="form-group quantity">
    <label>Quantity</label>
    <input data-bind="value: copies, valueUpdate: 'keyup'" id="numberofCopies" type="text">
</div>

Answer 1

Though the codes might seem confusing I would say thanks to you I've found some tricks to knockout that I didn't it can be done in that way (but I doubt I would use though :D).

But let's get back to the point, let's just say that you are tired of cleaning your code for now and you want to continue with this. The issue with this is with this one event: { change: onSubmit } . When the function was called, the value of selectedCategoryValue is not updated yet ( note : I only tested this on IE11 , I have not available macs to use for now). This code which assigns the value of selectedCategoryValue only took effect after the onSubmit function executed.

<input data-bind="attr: {value: value}, checked: $parent.selectedCategoryValue" id="uniqueQuestionName" name="uniqueQuestionName" type="radio">

I tried two ways that worked.

First is the brute way that i don't recommend because for some personal reason i don't like setTimeout.

Add setTimeout in the onSubmit function.

self.onSubmit = function() {
        setTimeout(function(){
            self.response("<div class='priceLoading'>Loading</div>");
            var servURL = "https://prices.azurewebsites.net/price/ProductionUS/" + ko.utils.unwrapObservable(self.selectedCategoryValue) + "/" + ko.utils.unwrapObservable(self.pages()) + "/" + ko.utils.unwrapObservable(self.copies());
            $.get(servURL, function(response) {
                self.response(response.PriceFormatted);
            });
            console.log(servURL);
        }, 100)
    }

Fiddle here .

Second is more knockouty way, utilizing the subscription of selectedCategoryValue so if the value of selectedCategoryValue changes, then call the onSubmit function.

Change the old subscribe callback of selectedCategoryValue to:

self.selectedCategoryValue.subscribe(function(newValue) {
        self.onSubmit();
    });

And remove change event that calls onSubmit:

<div class="field-container" data-bind="foreach:categoryOptions, valueUpdate: 'afterkeydown'" id="documentQuality">

Fiddle here .

And lastly, you should really upgrade your knockout library (if it's possible) so that you can utilize knockout's new cool features just like textInput to change your value, valueUpdate binding combo.