Knockout JS - 检查属性是否存在

Question

我正在尝试使用knockout渲染以下内容。

<!-- ko with: address-->
<!-- ko if: address1-->
<span style="display : block">
<span data-bind="varchar : address1"></span>
</span>
<span style="display : block">
<span data-bind="varchar : address2"></span>
</span>
<!-- /ko -->
<!-- /ko -->

问题在于即使地址对象存在，它可能仍然不包含address1参数。 我希望knockout在参数“address1”为null时不渲染嵌套的span。 目前将抛出以下错误：

Unable to parse bindings. Message: ReferenceError: address1 is not defined;

非常感谢您的帮助。

- Chin

---

经过进一步的测试，上述代码实际上是有效的。可能是机器里出了幽灵。 - Chin

undefined 和 null 是有区别的。你最初的问题表明 address1 是未定义的。现在，看起来你已经定义了 address1，但它的值是 null。 - RP Niemeyer

Answer 1

如果使用 <!-- ko if: $data.address1 -->，当 address1 未定义时，不会出错。

但如果稍后 address1 被填充了，它不会更新UI（address1 需要是可观察的原始值）。

- RP Niemeyer

---

因为如果UI需要更新，address1必须是可观察的，所以这个回答很重要。 - soniiic

似乎缺少"-"符号，正确应该是<!-- ko if: $data.address1 -->。 - Khanh TO

有人能解释一下为什么 <!-- ko if: address1 --> 不够用，而且如果它不存在就会导致错误吗？ - Daan van den Bergh

Answer 2

难道不只是把你的第二个if移动一下吗？

<!-- ko with: address -->
<span style="display : block">
<!-- ko if: address1 -->
<span data-bind="varchar : address1"></span>
<!-- /ko -->
</span>
<span style="display : block">
<span data-bind="varchar : address2"></span>
</span>
<!-- /ko -->

看起来我们需要查看您的viewModel以及地址之间的关系。我可以在knockout页面上的示例中轻松完成此操作：

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    <!-- ko if: latitude -->
    Latitude: <span data-bind="text: latitude"> </span>,
    <!-- /ko -->
    Longitude: <span data-bind="text: longitude"> </span>
</p>

- veblock

---

谢谢，我只是在检查address1，因为如果address1为空，其他地址也将为空。 - Chin

Answer 3

我曾遇到这样一个情况，我的地址模板被多处调用。

我的“国家名称”数据字段有时是countryName，有时是countryDesc。

我只需将模板更改为以下内容：

 <div data-bind="text: $data.countryName || $data.countryDesc"></div>

这利用了一个事实，即如果使用$data，它不会出错（正如RP Niemeyer所指出的）

- Simon_Weaver

---

忘掉 <!-- ko: if: --> 的答案，这个 应该是正确的答案。简单、干净，最重要的是，它允许您在变量不存在时设置一个值（与 if 不同，它只允许您在变量不存在时不显示任何内容）。 - machineghost

如果您期望它为空，那么这并不是一个好的通用答案（因为它会留下一个空的<div></div>，这相当笨拙）。我后来了解到:empty CSS选择器，可以用于隐藏空的div，所以这取决于您如何看待它，有点更或者更少地使用hacky。 - Simon_Weaver

Answer 4

这种行为的原因可能是您的“address”可观察数据的初始数据。

如果您是通过以下方式初始化您的视图模型：

this.address = ko.observableArray();

那么 "address" 和 "address1" 都是未定义的。

一个解决方法是在代码块的开头使用 "ko if" 语句来检查数据，像这样：

<!-- ko if: $data --> <br/>
<br/>
<span style="display : block"><br/>
<span data-bind="varchar : address1"></span><br/>
</span><br/>
<span style="display : block"><br/>
<span data-bind="varchar : address2"></span><br/>
</span><br/>
<br/>
<!-- /ko -->

- theRonny