选项绑定：选择列表不反映绑定对象的值

Posted 2023-03-27

【中文标题】选项绑定：选择列表不反映绑定对象的值

【英文标题】：Options binding: select list does not reflect value of bound object

【发布时间】：2012-01-06 05:12:05

【问题描述】：

我在 jQuery 模板中使用的选择列表上使用选项绑定：

<select data-bind="options: contactsViewModel.emailTypes, optionsText: 'Value', value: EmailType"></select>

调用模板时会针对多个电子邮件地址进行淘汰赛。

EmailTypes 是 emailtype 对象的列表 电子邮件对象由包含电子邮件地址字符串值的 Value 属性、包含 Guid id 的 Id 属性和包含 emailtype 对象的电子邮件类型属性组成。

emailtype 对象由 Value 属性组成，该属性包含电子邮件类型的名称和一个 guid id。

下拉列表中正确填写了可用的电子邮件类型，但下拉列表未选择正确的项目。它不反映绑定到它的对象的值。

编辑： 带有显示选择行的模板被此调用： tbody data-bind="template: name: 'emailTemplate', foreach: contactsViewModel.selectedContactEmails ">

selectedContactEmails 是一个充满电子邮件对象的 observableArray，在 Json 中如下所示：

"EmailType":"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a","ParentId":"191e8a64-8110-493c-b443-3063ff3a852c","Parent":null,"Value":"[e-mail]","Id":"a7aae8fd-6ca3-49ae-b529-124d37a148ca"

使用映射插件将这些对象的属性转换为可观察对象。

emailTypes 是一个由 EmailType 对象填充的 observableArray：

"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"

【问题讨论】：

你能告诉我们你的视图模型吗？

视图模型相当大，所以我已经概述了重要的可观察对象和对象结构。希望你能帮忙。

【参考方案1】：

下拉菜单不选择有界值，因为下拉菜单甚至不知道它绑定到哪个属性。您需要在数据绑定中指定 selectedOptions 属性。

options 属性告诉下拉它所持有的数组。

optionsText 属性告诉下拉列表使用哪个属性来显示每个数组项。

optionsValue 属性告诉下拉列表哪个属性用于选项值。

下拉列表如何知道它绑定到哪个值？

使用selected options

【讨论】：

谢谢。在我的下拉列表中，用户必须选择一个值。从我了解到的文档中，在这种情况下我必须使用“value”而不是“selectedOptions”。我试过selectedOptions，但它不起作用。

我在这个例子中没有看到选择列表。

对不起，这是正确的链接> jsfiddle.net/ucAUC/3（不，我没喝醉：P）

:-) 是的，这行得通。但是，如果我用这个替换 viewModel 为什么它不起作用： var eagle = EmailType: ko.observable("Value":"School","Id":"491e8a64-8110-493c-b443-3063ff3a852a" ) ;

因为它们不是同一个对象。尝试运行alert (emailTypes[2] == "Value":"School","Id":"491e8a64-8110-493c-b443-3063ff3a852a"); javascript 使用引用比较对象，我当然认为 Knockout 也在做同样的事情。正确的方法是通过 JSON 获取 Id（而不是获取整个对象），然后使用 Id 从 emailTypes 中找到对象（为什么在你已经拥有的情况下仍然通过电线传递整个对象它在客户端？）

【参考方案2】：

没有看到您的 viewModel 会很棘手，但显而易见的一件事是您已经限定了您的选项值 (options: contactsViewModel.emailTypes) 而不是您的“价值” (value: EmailType)。您是否需要添加到 EmailType 的路径，例如。 value: contactsViewModel.EmailType??

您还可以确认EmailType 与您的emailTypes 集合中的对象类型相同

【讨论】：

已确认。它是同一类型。请看我的补充。