Javascript 敲除可空对象属性上的js绑定

我有一个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>

然而，这有点矫枉过正。我可以在

allConditionLogic

中用正确的字段定义一个空白对象，但这需要更多的输入，如果API发生变化，则需要更新

---

有没有更好的方法来实现这一点？

一个简单的解决方案是创建一个敲除可观察变量，并将其设置为

false

，直到API返回数据为止。然后将您的

div

用

ko中的可观察值进行包装，如果：

binding-

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

var PageViewModel=function（）{
this.allConditionLogic=ko.observableArray（）；
//最初将其设置为false
this.hasAPIreturnedData=ko.observearray（false）；
}
var pageViewModel=新的pageViewModel（）；
$.get（'api/…'）
.完成（功能（数据）{
pageViewModel.allConditionLogic（ko.mapping.fromJS（数据））；
//在数据返回并转换后使其为真
pageViewModel.hasAPIreturnedData（true）；
});
字段id

---

可能会有更优雅的处理方法，但这取决于很多事情。正如我所说，这是我能想到的最简单的解决方案：）

但它真的会出错吗？如果

allConditionLogic

是一个空数组，那么knockout将不会对里面的

模板应用任何绑定。好的一点，我将看看原因-我可能过于简化了示例。。。

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