Question

我有一个Knockout视图模型，可以在Windows和Mac上的所有浏览器中正确显示...除了Mac上的Safari。

以下是具有数据绑定属性的HTML：

<div data-bind="visible: !Loading(), with: SelectedAddress">
    <!-- ko if: Comment().length -->
        <span data-bind="text: Comment"></span><br/>
    <!-- /ko -->
    <!-- ko if: Company().length -->
        <span data-bind="text: Company"></span><br/>
    <!-- /ko -->
    <!-- ko if: Name().length -->
        <span data-bind="text: Name"></span><br/>
    <!-- /ko -->
    <!-- ko if: Address1().length -->
        <span data-bind="text: Address1"></span><br/>
    <!-- /ko -->
    <!-- ko if: Address2().length -->
        <span data-bind="text: Address2"></span><br/>
    <!-- /ko -->
    <!-- ko if: ZipAndCity().length -->
        <span data-bind="text: ZipAndCity"></span><br/>
    <!-- /ko -->
    <!-- ko if: CountryName().length -->
        <span data-bind="text: CountryName"></span><br/>
    <!-- /ko -->
</div>

奇怪的问题是，Comment和Company的前两个绑定字段不会在Safari上显示其文本。但是，它们有空格 - 如果字段中没有内容，则可以看到不应该是换行符，并且这两个字段的换行符都显示出来。

此外，Safari的开发者工具显示DOM元素已填充了预期文本。

甚至更多：如果您点击并突出显示文字，那么它就会变得可见。如果将Safari拖动到另一个屏幕，情况也是如此。换句话说，如果Safari必须重新绘制然后渲染文本，但是当应用Knockout绑定时，虽然文本被添加到DOM元素，但不呈现。

我也尝试过像这样使用虚拟元素/无容器绑定

<!-- ko if: Comment().length -->
    <!-- ko text: Comment --><!-- /ko --><br/>
<!-- /ko -->

但这对结果没有影响。

我尝试组合一个jsfiddle示例，但它确实有效。因此，这可能与页面上所有可观察对象的相互作用或视图模型的嵌套等有关。

任何人都可以建议可能出现的问题或任何变通方法吗？

更新

问题似乎与父visible: !Loading()上的<div>绑定有关。

如果我删除了这个问题就会消失。

我知道这并不完全解决问题，但对我而言，它消除了问题，因为无论如何不再需要特定的绑定。

我还发现，如果我将这两个有问题的字段Comment和Company移到列表的末尾，则接下来的两个字段Name和Address1 ，继承了这个问题。但是，如果我删除了两个字段，那么问题就会消失。

Answer 1

看起来像重新流动内部内容的浏览器问题。

你可以尝试这个来强制敲除在加载完成后重新生成整个DOM吗？

<!-- ko ifnot: Loading -->
    <div data-bind="with: SelectedAddress">
        <!-- ko if: Comment().length -->
            <span data-bind="text: Comment"></span><br/>
        <!-- /ko -->
        <!-- ko if: Company().length -->
            <span data-bind="text: Company"></span><br/>
        <!-- /ko -->
        <!-- ko if: Name().length -->
            <span data-bind="text: Name"></span><br/>
        <!-- /ko -->
        <!-- ko if: Address1().length -->
            <span data-bind="text: Address1"></span><br/>
        <!-- /ko -->
        <!-- ko if: Address2().length -->
            <span data-bind="text: Address2"></span><br/>
        <!-- /ko -->
        <!-- ko if: ZipAndCity().length -->
            <span data-bind="text: ZipAndCity"></span><br/>
        <!-- /ko -->
        <!-- ko if: CountryName().length -->
            <span data-bind="text: CountryName"></span><br/>
        <!-- /ko -->
    </div>
<!-- /ko -->

Knockoutjs：一些可观察的绑定但在Safari中不可见

1 个答案: