选项绑定:选择列表不反映绑定对象的值
我在 jQuery 模板中使用的选择列表上使用选项绑定:
<select data-bind="options: contactsViewModel.emailTypes, optionsText: 'Value', value: EmailType"></select>
该模板通过针对多个电子邮件地址的淘汰赛来调用。
EmailTypes 是电子邮件类型对象的列表 电子邮件对象由包含电子邮件地址的字符串值的 Value 属性、包含 Guid id 的 Id 属性和包含 emailtype 对象的电子邮件类型属性组成。
emailtype 对象由 Value 属性组成,该属性包含电子邮件类型的名称和 guid id。
下拉列表已正确填充可用的电子邮件类型,但下拉列表未选择正确的项目。它不反映与其绑定的对象的值。
编辑: 带有显示的选择行的模板将被这样调用: tbody data-bind="template: { name: 'emailTemplate', foreach: contactViewModel.selectedContactEmails }">;
selectedContactEmails 是一个充满电子邮件对象的 observableArray,在 Json 中看起来像这样:
{"EmailType":{"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"},"ParentId":"191e8a64-8110-493c-b443-3063ff3a852c","Parent":null,"Value":"[email protected]","Id":"a7aae8fd-6ca3-49ae-b529-124d37a148ca"}
使用映射插件将这些对象的属性转换为可观察对象。
emailTypes 是一个充满 EmailType 对象的 observableArray:
{"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"}
I'm using the options binding on a select list used in a jQuery template:
<select data-bind="options: contactsViewModel.emailTypes, optionsText: 'Value', value: EmailType"></select>
The template is called with a knockout foreach for multiple email addresses.
EmailTypes is a list of emailtype objects
The email object consist of the Value property which contains the string value of the email address, an Id property which contains a Guid id and an email type property which contains the emailtype object.
The emailtype object consists of the Value property which contains the name of the email type and a guid id.
The dropdown is correctly filled with the available email types, but the dropdown doesn't select the right item. It doesn't reflect the value of the object bound to it.
EDIT:
The template with the showed select line is getting called by this:
tbody data-bind="template: { name: 'emailTemplate', foreach: contactsViewModel.selectedContactEmails }">
selectedContactEmails is an observableArray filled with email objects, looking like this in Json:
{"EmailType":{"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"},"ParentId":"191e8a64-8110-493c-b443-3063ff3a852c","Parent":null,"Value":"[email protected]","Id":"a7aae8fd-6ca3-49ae-b529-124d37a148ca"}
The properties of these objects are converted to observables using the mapping plugin.
emailTypes is an observableArray filled with EmailType objects:
{"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
下拉列表不会选择有界值,因为下拉列表甚至不知道它绑定到哪个属性。您需要在数据绑定中指定
selectedOptions
属性。options
属性告诉下拉菜单它所保存的数组。optionsText
属性告诉下拉列表用于显示每个数组项的属性。optionsValue
属性告诉下拉列表哪个属性用于选项值。下拉列表如何知道它绑定到哪个值?
使用选定的选项
The dropdown doesn't select the bounded value because the dropdown doesn't even know which attribute is it bounded to. You'll need to specify the
selectedOptions
attribute in your data binding.The
options
attribute tells drop down about the array it holds.The
optionsText
attribute tells drop down which property is used to display for each array item.The
optionsValue
attribute tells dropdown which property is used for option value.How will the dropdown know which value is it binded to?
Use selected options
如果没有看到你的viewModel,这很棘手,但显而易见的一件事是你已经限定了你的选项值(
选项:contactsViewModel.emailTypes
),但没有限定你的“值”(值:EmailType
) 。您是否需要添加 EmailType 的路径,例如。值:contactsViewModel.EmailType
??另外,您能否确认
EmailType
与您的emailTypes
集合中的对象类型相同It's tricky without seeing your viewModel but one thing apparent is that you have qualified your options value (
options: contactsViewModel.emailTypes
) but not your 'value' (value: EmailType
). Do you need to add the path to EmailType eg.value: contactsViewModel.EmailType
??Also can you confirm that
EmailType
is the same type of object that is in youremailTypes
collection