Question

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

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

到目前为止，所有内容都适用于Chrome或Firefox，但不适用于Safari或IE。我已经能够缩小质量单选按钮的问题。

问题是，当您使用＆＃34;质量＆＃34;时，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)
    }

小提琴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。

最后，您应该真正升级您的淘汰图书馆（如果可能的话），以便您可以利用淘汰赛的新酷炫功能，例如textInput来更改您的value, valueUpdate绑定组合。

knockoutjs＆＃34;检查＆＃34;绑定在Safari和IE中无法正常工作

1 个答案: