为什么在使用 Ajax 请求时需要 Knockout 'with' 绑定答案

【问题标题】：Why is the Knockout 'with' binding necessary when using an Ajax request为什么在使用 Ajax 请求时需要 Knockout 'with' 绑定
【发布时间】：2014-05-24 12:23:10
【问题描述】：

此问题基于此处 Knockout 在线教程第 2 步的代码：http://learn.knockoutjs.com/#/?tutorial=webmail

以这个jsfiddle为例：http://jsfiddle.net/rniemeyer/PKDdG/

第 10 到 12 行当前使用with Knockout 绑定：

<table class="mails" data-bind="with: chosenFolderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: mails">

教程说明：

with 绑定创建一个绑定上下文，在绑定其中的任何元素时将使用该上下文。在这个例子中，里面的所有东西都将绑定到 selectedFolderData，所以没有必要使用 selectedFolderData。作为邮件前的前缀。

根据测试上面的引用，我尝试将第 10 行到第 12 行替换为以下内容：

<table class="mails">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: chosenFolderData().mails">

我在控制台中收到Cannot read property 'Inbox' of undefined 错误。

在教程中，为什么代码工作需要with 绑定？我知道它正在改变绑定概念，但为什么我不能手动选择带有 chosenFolderData. 前缀的绑定上下文？

【问题讨论】：

I found this similar question，但使用前缀似乎可行。为什么它在这种情况下不起作用？我怀疑包含with 可能会强制代码等待Ajax 请求返回或其他东西，但我仍然不确定。

标签： javascript data-binding knockout.js

【解决方案1】：

with 绑定发生的情况是，如果您与 with 绑定的属性为 null 或未定义，它将跳过内部的绑定（实际上不会呈现这些元素）。当您删除 with 时，它会尝试绑定未定义的 chosenFolderData，因此所有内部属性绑定都会失败。一旦遇到错误，knockout 就会停止尝试绑定模型的其余部分。

您可以使用if 绑定获得相同的结果：

<table class="mails" data-bind="if: chosenFolderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: chosenFolderData().mails">

if 绑定会给你类似的结果。见http://jsfiddle.net/PKDdG/166/

with 为您提供便利，让您不必继续输入长链的财产访问权限。

docs 中提到了这一点，但它可能并不那么清晰和明显：

with 绑定将根据关联值是否为 null/undefined 动态添加或删除后代元素

【讨论】：