Knockout js绑定可空对象的属性

Posted 2023-03-27

【中文标题】Knockout js绑定可空对象的属性

【英文标题】：Knockout js binding on properties of nullable objects

【发布时间】：2018-09-21 11:35:45

【问题描述】：

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

数据包含嵌套对象，例如

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

加载到页面视图模型中

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


var pageViewModel = new PageViewModel();

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

html 包含对对象的绑定

<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 绑定，如果绑定对象不存在，则不会创建内部 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 发生更改，则需要更新。

有没有更好的方法让它工作？

【问题讨论】：

真的会报错吗？如果allConditionLogic 是一个空数组，则knout 不会对里面的<p> 模板应用任何绑定。

好点，我来看看为什么 - 我可能把这个例子简化得太多了......

【参考方案1】：

一个简单的解决方案可能是创建一个剔除可观察变量并将其设置为false，直到您获得 API 返回的数据。然后用 ko if: 绑定中的 observable 包裹你的 div -

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-->

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