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

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

定价由服务生成,每个请求的数据作为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>

解决方法:

虽然代码可能看起来令人困惑,但我要感谢你,我已经找到了一些淘汰的技巧,我没有这样做可以这样做(但我怀疑我会使用尽管：D).

但是让我们回到这一点,让我们说你现在已经厌倦了清理你的代码而你想继续这样做.这个问题出现在以下一个事件中：{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)
    }

小提琴here.

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

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

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

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

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

小提琴here.

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

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

相关推荐