当源未定义时,这是 KnockoutJS 绑定的正确行为吗?
Is this the correct behavior of KnockoutJS binding when source is undefined?
我遇到了一个我需要从概念上理解的问题。我找不到可以解决我对这种行为的不安的文件或任何其他信息来源:
这种行为是预期的吗?当我有一个基于另一个可观察对象的计算可观察对象设置为一个空对象时,引用一个尚不存在的 属性,视图中没有任何内容 rendered/bound,viewModel 数据根本不知道这个未定义的存在属性...这是一种常见的情况,您将一个可观察对象初始化为一个空对象,稍后将其设置为一个非空对象,您可能需要从中访问非空对象的属性。
它与以下链接中讨论的内容形成对比(是吗?):
KnockoutJS binding when source is null/undefined
Simplifying and Cleaning Up Views in KnockoutJS
请查看以下代码段(和评论):
运行 脚本并点击行为按钮!
var viewModel = function() {
var self = this;
//not empty object literal observable initialized
self.object = ko.observable({p1: "Born ready"});
self.objectP1 = ko.pureComputed(function() {
return self.object().p1;
});
//empty object literal observable initialized
self.objectEmptyOnInit = ko.observable({});
//computed observable based on a (undefined) property, is simply discarded, not rendered in view, not present in viewModel $data
self.objectP1EmptyOnInit = ko.pureComputed(function() {
return self.objectEmptyOnInit().p1;
});
//same behavior as this computed observable, returning explicitly undefined
self.objectP2EmptyOnInit = ko.pureComputed(function() {
return undefined;
});
self.debugInfo = function(item) {
return ko.toJSON(item);
};
};
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span data-bind="text: objectP1"></span>
<br />
<span data-bind="text: objectP1EmptyOnInit"></span>
<br />
<button data-bind="click: function() { $root.objectEmptyOnInit({p1: 'Look Im born!'}) }">Give birth to objectEmptyOnInit</button>
<div style="border: white dotted thin; clear: both">
<h4>Debug viewModel $data</h4>
<pre data-bind="text: debugInfo($data)"></pre>
<div data-bind="visible: objectEmptyOnInit()">
<span>Not a clue about objectP1EmptyOnInit</span>
</div>
<div data-bind="visible: objectEmptyOnInit().p1">
<span>Here comes objectP1EmptyOnInit</span>
</div>
</div>
这是一种淘汰赛默认行为。计算的可观察对象足够智能,可以避免因空对象的未定义属性而引起的错误。片段就是证明。它只是工作。
我遇到了一个我需要从概念上理解的问题。我找不到可以解决我对这种行为的不安的文件或任何其他信息来源:
这种行为是预期的吗?当我有一个基于另一个可观察对象的计算可观察对象设置为一个空对象时,引用一个尚不存在的 属性,视图中没有任何内容 rendered/bound,viewModel 数据根本不知道这个未定义的存在属性...这是一种常见的情况,您将一个可观察对象初始化为一个空对象,稍后将其设置为一个非空对象,您可能需要从中访问非空对象的属性。
它与以下链接中讨论的内容形成对比(是吗?):
KnockoutJS binding when source is null/undefined
Simplifying and Cleaning Up Views in KnockoutJS
请查看以下代码段(和评论):
运行 脚本并点击行为按钮!
var viewModel = function() {
var self = this;
//not empty object literal observable initialized
self.object = ko.observable({p1: "Born ready"});
self.objectP1 = ko.pureComputed(function() {
return self.object().p1;
});
//empty object literal observable initialized
self.objectEmptyOnInit = ko.observable({});
//computed observable based on a (undefined) property, is simply discarded, not rendered in view, not present in viewModel $data
self.objectP1EmptyOnInit = ko.pureComputed(function() {
return self.objectEmptyOnInit().p1;
});
//same behavior as this computed observable, returning explicitly undefined
self.objectP2EmptyOnInit = ko.pureComputed(function() {
return undefined;
});
self.debugInfo = function(item) {
return ko.toJSON(item);
};
};
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span data-bind="text: objectP1"></span>
<br />
<span data-bind="text: objectP1EmptyOnInit"></span>
<br />
<button data-bind="click: function() { $root.objectEmptyOnInit({p1: 'Look Im born!'}) }">Give birth to objectEmptyOnInit</button>
<div style="border: white dotted thin; clear: both">
<h4>Debug viewModel $data</h4>
<pre data-bind="text: debugInfo($data)"></pre>
<div data-bind="visible: objectEmptyOnInit()">
<span>Not a clue about objectP1EmptyOnInit</span>
</div>
<div data-bind="visible: objectEmptyOnInit().p1">
<span>Here comes objectP1EmptyOnInit</span>
</div>
</div>
这是一种淘汰赛默认行为。计算的可观察对象足够智能,可以避免因空对象的未定义属性而引起的错误。片段就是证明。它只是工作。