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

Posted 2023-03-27

【中文标题】Knockoutjs：一些可观察的绑定但在 Safari 中不可见

【英文标题】：Knockoutjs: some observables binding but not visible in Safari

【发布时间】：2014-05-03 03:13:32

【问题描述】：

我有一个 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 上不显示它们的文本。但是，它们有空格 - 您可以看到，如果字段中没有内容，则不应有换行符，并且这两个字段的换行符 都出现了。 p>

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

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

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

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

但这对结果没有影响。

我尝试整理一个 jsfiddle 示例，但它奏效了。所以这可能与页面上所有可观察对象的相互作用有关，或者与视图模型的嵌套有关，等。

任何人都可以提出可能出现的问题或任何解决方法吗？

更新：

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

如果我删除它，那么问题就会消失。

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

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

【问题讨论】：

对我来说听起来像是 safari 中的一个错误，可能想通过他们的支持系统推动它

您是否建议 Apple 有一个错误报告机制，他们欢迎并愉快地调查用户提交的内容？

不知道欢迎和快乐，但试试here

【参考方案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 -->

【讨论】：

感谢@huocp 的建议，但这没什么区别。我粘贴了您的建议，加载了页面，但仍然有空格。