Linking options: the selection list does not reflect the value of the associated object

I use parameter bindings in the select list used in the jQuery template:

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

The template is called with a foreach knockout for multiple email addresses.

EmailTypes is a list of email objects. An email object consists of the Value property, which contains the string value of the email address, the Id property, which contains the Guid identifier, and the 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 the identifier guid.

The drop-down list is correctly populated with the available email types, but the drop-down list does not select the correct item. It does not reflect the significance of the object associated with it.

EDIT: A template with the selection line shown is invoked as follows: tbody data-bind = "template: {name: 'emailTemplate', foreach: contactsViewModel.selectedContactEmails}">

selectedContactEmails is an observable array populated with email objects, similar to Json:

 {"EmailType":{"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"},"ParentId":"191e8a64-8110-493c-b443-3063ff3a852c","Parent":null,"Value":" jan@jan.com ","Id":"a7aae8fd-6ca3-49ae-b529-124d37a148ca"} 

The properties of these objects are converted into observables using the plugin.

emailTypes is an observable array filled with EmailType objects:

 {"Value":"Home","Id":"191e8a64-8110-493c-b443-3063ff3a852a"} 
+4
source share
2 answers

The drop-down menu does not select a limited value, because the drop-down menu does not even know which attribute it is attached to. You need to specify the selectedOptions attribute in the data binding.

The options attribute indicates that it contains an array.

The optionsText attribute tells drop down which property is used to display for each element of the array.

The optionsValue attribute tells dropdown which property is used for the parameter value.

How does the dropdown menu know what value is tied to it?

Use selected options

+8
source

This is difficult without seeing your viewModel, but one thing is obvious in that you have defined the value of your options ( options: contactsViewModel.emailTypes ), but not your "value" ( value: EmailType ). You need to add the path to EmailType, for example. value: contactsViewModel.EmailType ??

You can also confirm that EmailType is the same type of object that is in your emailTypes collection emailTypes

0
source

Source: https://habr.com/ru/post/1383019/


All Articles