0

我有一个包含多个可观察对象（预算、公司、成本中心）的视图模型。Budgets 有一个 CostcenterID 和一个计算出的 observable，它根据 costcenterid 从 costcenterlist 中返回该预算的成本中心。costCenter 有一个 companyID 和一个计算出的 observable，它根据 companyId 从公司列表中返回该成本中心的公司。

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

<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：对象不支持此属性或方法；

绑定值：文本：CostCenter().Company().Title

（如果根据 costcenterID 没有找到成本中心，我为 costCenter 计算的 observable 返回一个空的 Object {}）。

处理这个问题的最好方法是什么，而不用一堆 if 语句来检查对象是否为空？

4

3 回答 3

6

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

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

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

或者，您可以创建一个计算的 observable 来表示Title具体的，例如：<span data-bind="text: CostCenterCompanyTitle"></span>。因此，在这种情况下，计算将处理检查成本中心是否已定义。但是，如果您有许多要绑定的属性，这可能会使您的视图模型复杂化和混乱。使用with绑定是一个更简单的选择。

于 2012-11-28T02:38:16.470 回答
1

我建议您使用 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>

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

于 2012-11-27T22:16:49.777 回答
0

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

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

于 2013-12-12T13:08:26.980 回答