Question

我有一个包含多个可观察数组（预算，公司，成本中心）的viewmodel。预算有一个CostcenterID和一个计算的observable，它根据costcenterid从costcenterlist返回该预算的costcenter.fostCenter有一个companyID和一个计算的observable，它根据commpanyId从公司列表返回该costcenter的公司。 / p>

在我看来，我对预算有约束力，我有

<td>
    <select data-bind="options:$root.Costcenter,optionsCaption:'cost center', optionsText:'Title', optionsValue:'Id', value:CostCenterId "></select>                         
</td>
<td>
    <span data-bind="text:CostCenter().Company().Title"></span>
</td>

如果预算有成本中心，它可以正常运行，但是当给定预算中没有成本中心时，我会收到绑定错误

0x800a139e - Microsoft JScript运行时错误：无法解析   绑定。

消息：TypeError：Object不支持此属性或方法;

Bindings value：text：CostCenter（）。Company（）。Title

（如果没有根据costcenterID找到costcenter，我的costCenter的observable会返回一个空的Object {}。

什么是处理这个问题的最佳方法，而不是用一堆if语句乱丢我的绑定，检查一个对象是否为空？

Answer 1

一个简单的解决方案是使用with绑定来包装Title范围，并使CostCenter在空时返回null。

<td data-bind="with: CostCenter">
    <span data-bind="text: Company().Title"></span>
</td>

当CostCenter为null时，它不会呈现内部内容，也不会尝试绑定不存在的属性/可观察对象。

或者，您可以创建一个专门代表Title的计算observable，例如：<span data-bind="text: CostCenterCompanyTitle"></span>。因此，在这种情况下计算的将处理检查是否定义了CostCenter。但是，如果要绑定许多属性，则会使视图模型变得复杂和混乱。使用with绑定是一种更容易的选择。

Answer 2

我建议你用div（或相同的td）结束与costCenter相关的任何功能，例如检查这个对象是否未定义：像

costCenterAccessible = ko.computed(
function()
{
   return self.CostCenter() != undefined;
}, this
);


<td data-bind="visible: costCenterAccessible>
    <span data-bind="text:CostCenter().Company().Title"></span>
</td>

但是如果并非所有字段都可以访问，那么您需要三思而后行使用该表来完成此任务是一个很好的解决方案。

Answer 3

<td> <div data-bind="if: CostCenter()"> <span data-bind="text:CostCenter().Company().Title"></span> </div> </td>

在尝试打印标题之前检查CostCenter。

在嵌套的observable中处理null对象

3 个答案: