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

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>

奇怪的问题是,前两个绑定字段,for 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 -->