knockout.js - 奇怪的敲除绑定结果。With 给出结果，而 dotting 则没有

Question

给定以下代码。为什么将“test”替换为“”，而将“test2”替换为“Travel Log”

    <h1 id="mainHeader" data-bind="text: $root.localization.frontHeader">test</h1>
    <div id="pages" data-bind="with: localization">
        <h1 class="frontHeader" data-bind="text: frontHeader">test2</h1>
    </div>

Answer 1

如果您的localization属性是 a ，那么如果您在表达式中使用它，ko.observable则需要编写。localization()

因此，将您的绑定更改为：

<h1 id="mainHeader" data-bind="text: $root.localization().frontHeader">test</h1>
<div id="pages" data-bind="with: localization">
    <h1 class="frontHeader" data-bind="text: frontHeader">test2</h1>
</div>

但是在这种情况下，您需要在您的localization属性为空时处理这种情况（with绑定为您执行此操作）。

因此，要使其适用于您的 localization属性为空（或 null 或未定义）的情况，您需要在绑定中添加额外的检查：

<h1 id="mainHeader" 
    data-bind="text: $root.localization() && $root.localization().frontHeader">
       test
</h1>
<div id="pages" data-bind="with: localization">
    <h1 class="frontHeader" data-bind="text: frontHeader">test2</h1>
</div>

演示JSFiddle。

Answer 2

"with"为您调用 observable。在表达式中，您需要自己调用它，因此您需要添加“()”。data-bind="text: $root.localization().frontHeader"