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

Question

我为不同的文档类型构建了一个定价计算器,根据文档中的页数,质量和数量为您提供最终价格.

定价由服务生成,每个请求的数据作为JSON对象输出,而不是在计算器上使用.

到目前为止,一切都适用于Chrome或Firefox,但不适用于Safari或IE.我已经能够缩小质量单选按钮的问题.

问题是,当您使用"质量"单选按钮时,Safari中的定价总是不正确.似乎第一次单击单选按钮没有触发,你总是得到不正确的价格.

我在jsfiddle上建立了一个示例,说明如何重现问题:https://jsfiddle.net/IntricatePixels/f21dtr8j/

JSFiddle的例子应该包含所有细节,但如果有必要,我很乐意在这篇文章中提供更多信息.

<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

虽然代码可能看起来令人困惑,但我要感谢你,我已经找到了一些淘汰的技巧,但我没有以这种方式完成(但我怀疑我会使用它们:D).

但是让我们回到这一点,让我们说你现在已经厌倦了清理你的代码而你想继续这样做.这个问题与此有关event: { change: onSubmit }.当函数被调用时,值selectedCategoryValue还没有更新(注意:我只在IE11上测试过这个,我现在还没有可用的mac).分配值的代码selectedCategoryValue仅在onSubmit执行函数后生效.

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

我尝试了两种方法.

首先是我不推荐的粗野方式,因为出于某些个人原因我不喜欢setTimeout.

在onSubmit函数中添加setTimeout.

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)
    }

小提琴这里.

第二种是更多的淘汰方式,利用订阅selectedCategoryValue如果值的selectedCategoryValue变化,则调用onSubmit函数.

将旧的订阅回调更改selectedCategoryValue为:

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

并删除调用onSubmit的更改事件:

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

小提琴这里.

最后,你应该真正升级你的淘汰库(如果可能的话),这样你就可以利用淘汰赛的新酷炫功能,就像textInput更改你的value, valueUpdate绑定组合一样.