淘汰赛：嵌套的 dependentObservable - 不起作用
我是 Knockout JS 的新手。 我需要按如下方式绑定嵌套数组
名称：下拉
电子邮件：所选用户的姓名
联系方法类型：从ContactInfo中下拉联系方法类型选择
联系人值： 来自 ContactInfo 的实际值
我已获得姓名、电子邮件和联系人值。我需要知道如何在下拉列表中选择联系方法类型值，并且同样需要绑定到联系值。
我收到以下错误 错误：无法获取属性“ContactMethodType”的值：对象为 null 或未定义
function LifelineViewModel() {
this.lifelines = ko.observableArray([{
Name: "",
Email: "",
ContactInfo:
{
ContactMethodType: "",
ContactValue: ""
}
}]);
this.selectedLifeline = ko.observable();
this.contactTypes = ko.observableArray([{Name: ''}]);
this.selectedContactInfo = ko.dependentObservable(function () {
if (this.selectedLifeline() === undefined) return null;
return this.selectedLifeline().ContactInfo;
}, this);
this.selectedContactMethodType = ko.dependentObservable(function () {
if (this.selectedContactInfo() === undefined) return null;
return this.selectedContactInfo().ContactMethodType;
}, this);
}
HTML 代码
<select data-bind="options: lifelines, optionsText: 'Name', value: selectedLifeline"></select>
<p><span data-bind="text: selectedLifeline().Email"></span></p>
<p><span data-bind="text: selectedContactInfo().ContactMethodType + ' ' + selectedContactInfo().ContactValue"></p>
<select data-bind="options: contactTypes, optionsText: 'Name', value: selectedContactMethodType"></select>
I am new to Knockout JS.
I need to bind nested arrays as folows
Name: Drop down
Email: Selected user's name
Contact Method Type: Drop down with Contact Method type from ContactInfo selected
Contact Value: Actual value from ContactInfo
I have got Name, email and contact value working. I need to know how to have contact method type value being selected in the drop down and the same need to be bound to contact value.
I get following error
Error: Unable to get value of the property 'ContactMethodType': object is null or undefined
function LifelineViewModel() {
this.lifelines = ko.observableArray([{
Name: "",
Email: "",
ContactInfo:
{
ContactMethodType: "",
ContactValue: ""
}
}]);
this.selectedLifeline = ko.observable();
this.contactTypes = ko.observableArray([{Name: ''}]);
this.selectedContactInfo = ko.dependentObservable(function () {
if (this.selectedLifeline() === undefined) return null;
return this.selectedLifeline().ContactInfo;
}, this);
this.selectedContactMethodType = ko.dependentObservable(function () {
if (this.selectedContactInfo() === undefined) return null;
return this.selectedContactInfo().ContactMethodType;
}, this);
}
HTML code
<select data-bind="options: lifelines, optionsText: 'Name', value: selectedLifeline"></select>
<p><span data-bind="text: selectedLifeline().Email"></span></p>
<p><span data-bind="text: selectedContactInfo().ContactMethodType + ' ' + selectedContactInfo().ContactValue"></p>
<select data-bind="options: contactTypes, optionsText: 'Name', value: selectedContactMethodType"></select>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的问题在于你的第二个依赖Observable。默认情况下，dependentObservables 在创建时第一次被评估。在您的情况下，
selectedContactMethodType将从selectedContactInfo获取当前值，该值将为null。这与您的undefined检查不匹配，然后尝试从null读取ContactMethodType，这会导致错误。因此，您需要更加小心地对待 undefined 和 null。
使用 1.3 beta< 中的控制流绑定/a>，这是您的示例，没有使用 dependentObservables 来防止 null： http://jsfiddle.net/rniemeyer/9msqK/
Your issue lies in your second dependentObservable. By default, dependentObservables are evaluated for the first time when they are created. In your case,
selectedContactMethodTypewill get the current value fromselectedContactInfowhich will benull. This will not match yourundefinedcheck and then try to readContactMethodTypeoff ofnullwhich causes the error.So, you would need to be a bit more careful in how you treat undefined vs. null.
Using the control-flow bindings in 1.3 beta, here is your sample without using dependentObservables to protect against null: http://jsfiddle.net/rniemeyer/9msqK/