在嵌套的observable中处理null对象

Question

我有一个带有几个可观察数组的视图模型(预算,公司,成本中心).预算有一个CostcenterID和一个计算的observable,它根据costcenterid从costcenterlist返回该预算的costcenter.fostCenter有一个companyID和一个计算的observable,它根据commpanyId从公司列表中返回该costcenter的公司.

在我看来,我对预算有约束力,而且我有

<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不支持此属性或方法;

绑定值:文本:CostCenter().公司().标题

(如果没有根据costcenterID找到costcenter,则我对costCenter的计算observable返回一个空的Object {}.

什么是最好的方法来处理这个问题,而不是乱扔我的绑定与一堆if语句,检查一个对象是否为空？

Answer 1

一个简单的解决方案是使用with绑定来包装你的Titlespan,并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绑定是一个更容易的选择.