KnockOutJS-获取“未定义"值，不确定原因 [英] KnockOutJS - getting an 'undefined' value, not sure why

问题描述

http://jsfiddle.net/toddhd/XWgK5/2/

看看提琴手是最好的方式.如果您在具有开发人员模式的浏览器(例如Chrome或FF与FireBug)中运行它，并运行代码，您将在控制台中看到错误消息.它告诉我我尝试读取的值是不确定的.

Looking at the fiddler is the best way to see this. If you run it in a browser with a developer mode, such as Chrome, or FF with FireBug, and run the code, you'll see an error show up in the console. It tells me that the value I'm trying to read is undefined.

该错误发生在第50行:

The error is occurring on line 50:

 if (item.Id == self.selectedOfferTypeDetailsType().Id) {

self.selectedOfferTypeDetailsType().Id未定义

self.selectedOfferTypeDetailsType().Id is undefined

问题是，您会看到我在其他地方引用了相同的值，并且在其他地方似乎工作正常.显然我很想念……头撞墙了两天，请换一下新的眼睛.

The thing is, you'll see that I'm referencing this same value elsewhere, and it seems to be working OK elsewhere. Clearly I'm missing something... been banging my head against the wall for two days and could use a fresh set of eyes please.

推荐答案

Damien和jaux都拥有敏锐的眼睛，但在这种情况下，它们仅是部分正确的.的确，计算出的淘汰赛将在声明后立即进行评估，以便淘汰赛可以确定您的计算需要订阅的其他可观察对象，但这不是何时发生错误.

Both Damien and jaux have sharp eyes, but they're only partially correct in this case. It's true that a Knockout computed is evaluated immediately after it's declared so Knockout can determine to which other observables your computed needs to subscribe, but that's not when your error is occurring.

定义后计算的初始评估运行没有问题.但是，一旦您调用ko.applyBindings，您的选择就会被挂钩并开始使用您的视图模型，这就是您的错误发生的时间.

The initial evaluation of your computed after definition is running without issue. However, as soon as you call ko.applyBindings your selects are hooked up and start working with your view models, and that's when your error occurs.

绑定第一个选择(id = offerTypes)后，它会执行一些不寻常的操作:它会立即写入selectedOfferType .这不是绑定选择通常起作用的方式.通常，在用户更改某些内容之前，select才将其值写入其中，但是在这种情况下，您的select绑定将立即将一个值写入SelectedOfferType中.忍受我，我将告诉您如何找到错误.

Once your first select (with id=offerTypes) is bound, it does something unusual : it causes an immediate write to selectedOfferType. This is not the way binding selects usually works. Usually a select doesn't write it's value until the user changes something, but in this case your select binding is writing a value to SelectedOfferType immediately. Bear with me and I'll show you how I found the error.

SelectedOfferType，因此，一旦您的第一个选择绑定并向SelectedOfferType中写入新值，offerDetails就会运行以检查其值是否也已更改.在offerDetails内部，您将一个值写入selectedOfferTypeDetailsType，该值会提醒它的订阅者-包括要约"在内的订阅者.执行要约"，但是您只是将self.selectedOfferTypeDetailsType()设置为null(在offerDetails中)，并且您无法读取"null"的"id"属性.

SelectedOfferType is being observed by offerDetails, so as soon as your first select is bound and writes a new value to SelectedOfferType, offerDetails runs to check if it's value has changed as well. Inside offerDetails, you write a value to selectedOfferTypeDetailsType, which alerts it's subscribers - subscribers including "offer". "Offer" executes, but you just set self.selectedOfferTypeDetailsType() to null (in offerDetails), and you can't read the "id" property of "null".

因此，问题是为什么选择绑定时，select将它写入一个值?"答案在于您的约束力.初始化视图模型时，您似乎在尝试使用offerTypes中的第二个值来预先设置第一个下拉列表:

So, the question is "why is the select writing a value to SelectedOfferType when it's bound?" The answer lies in your bindings. When you initialize your view model, it looks like you're trying to pre-set the first dropdown with the second value from offerTypes :

self.selectedOfferType = ko.observable(self.offerTypes()[1]);

和您的约束力

<select id="offerTypes" data-bind="options: offerTypes, ... value: selectedOfferType"></select>

同意您将值附加到所选内容.但是，您在self.offerTypes()[1]上将self.selectedOfferType设置为 object ，但是上面我省略的绑定部分表明，选项的值不是对象，而是任何对象值位于"Id"属性.

agrees that you're attaching the value to your select. However, you set self.selectedOfferType to the object at self.offerTypes()[1] but the part of your binding that I omitted above indicates that the values of your options aren't objects, but whatever value is at the 'Id' property.

<select data-bind="... optionsValue: 'Id', ..."></select>

这种填充对象的方法是将selectedOfferType填充，然后将optionsValue分配给属性，这导致Knockout知道selectedOfferType中的值无效(不可选择)，因此Knockout立即使用第一个可能的选项值更新selectedOfferType.在这种情况下，为'0'.

This combination of filling selectedOfferType with an object, but assigning the optionsValue to a property causes Knockout to understand that the value in selectedOfferType is invalid (not selectable) so Knockout immediately updates selectedOfferType with the first possible option value. In this case, a '0'.

这会触发写操作，从而触发所有订阅者，从而导致您的错误.

That triggers a write, which triggers all the subscribers, which results in your error.

由于您编写的大多数代码都期望在selectedOfferType中有一个对象，因此我只需从您的选择中删除"optionsValue:'Id'"即可.

Since most of your code is written to expect an object in selectedOfferType, I'd just remove "optionsValue: 'Id'" from your select.

如何回答一个漫长的答案? :-D

How's that for a long-winded answer? :-D

这篇关于KnockOutJS-获取“未定义"值，不确定原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！