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

Stack Overflow用户

提问于 2014-03-25 02:33:47

回答 1查看 878关注 0票数 5

我有一个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 -->

但这对结果没有影响。

我试着编了一个弹琴的例子，但成功了。因此，这可能与页面上所有可观测数据的相互作用，或者视图模型的嵌套有关，等等。

有人能提出什么可能是错误，或任何解决办法吗？

更新：

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

如果我去掉这个，问题就解决了。

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

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

javascript

knockout.js

safari

observable

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

发布于 2014-03-31 15:12:48

看起来就像一个浏览器的问题，重新流的内部内容。

在加载完成后，您能尝试此操作来强制将整个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 -->