javascript - 可空对象属性上的 Knockout js 绑定(bind)

Question

我有一个 knockout.js 页面，它从 API 加载数据并使用 knockout 映射插件将数据转换为 ViewModel 上的参数。

数据包含嵌套对象，例如

[{
    id: 1,
    targetField: {
        id: 132,
        name: 'Field ABC',
        ...
    },
    conditionalOperator: {
        id: 8,
        display: 'Less Than'
    },
    conditionalValue:13
},
...
]

加载到页面 View 模型

var PageViewModel = function() {
    ...
    this.allConditionLogic = ko.observableArray();
}

var pageViewModel = new PageViewModel();

$.get('api/...')
    .done(function(data) {
        pageViewModel.allConditionLogic(ko.mapping.fromJS(data));
    });

html 包含对象的绑定(bind)

<div data-bind="foreach: allConditionLogic">
    <p>Field id <span data-bind="text: targetField().id"></span> <span data-bind="text: conditionalOperator().display"></span> <span data-bind="text: conditionalValue"></span></p>
</div>

然而，这与 ajax 调用返回之前的错误一样，targetField 和 conditionalOperator 为 null。

可以使用额外的 span 元素和 with 绑定(bind)，如果绑定(bind)对象不存在则不会创建内部 html - 例如

<p>Field id <span data-bind="with: targetField"><span data-bind="text: id"></span> <span data-bind="with: conditionalOperator"><span data-bind="text: display"></span></span> <span data-bind="text: conditionalValue"></span></p>

然而，这种接缝有点矫枉过正。我可以在 allConditionLogic 中用正确的字段定义一个空白对象，但这需要更多的输入，并且如果 API 发生变化则需要更新。

有没有更好的方法让它发挥作用？

Answer 1

一个简单的解决方案可能是创建一个 knockout 可观察变量并将其设置为 false，直到您获得 API 返回的数据。然后将您的 div 与 ko if: 绑定(bind)中的可观察对象包裹起来 -

var PageViewModel = function() {
this.allConditionLogic = ko.observableArray();
//Set it to false initially
this.hasAPIreturnedData = ko.observableArray(false);
}

var pageViewModel = new PageViewModel();

$.get('api/...')
    .done(function(data) {
        pageViewModel.allConditionLogic(ko.mapping.fromJS(data));
        //make it true after data is returned and is transformed
        pageViewModel.hasAPIreturnedData(true);
    });


<!--ko if: hasAPIreturnedData -->
<div data-bind="foreach: allConditionLogic">
    <p>Field id <span data-bind="text: targetField().id"></span> <span data-bind="text: conditionalOperator().display"></span> <span data-bind="text: conditionalValue"></span></p>
</div>
<!--/ko-->

可能有更优雅的方法来处理这个问题，但这取决于很多因素。正如我所说，这是我能想到的最简单的解决方案:)