I am currently working on a form that generates an array of attribute objects. These attribute objects consist of an array property that contains multiple attribute values. Users can input an attribute name and corresponding values which then map to the attribute object:
function Attribute(data) {
var self = this;
self.Name = ko.observable([data.attributeName]);
self.Values = ko.observable([data.attributeValues]);
}
The Values array is directly linked to AttributeValues:
function AttributeValue(data) {
this.Value = data.value;
};
The ViewModel stores an array of AttributeValues as they are created, associating them with the respective Attribute:
function newProductViewModel() {
var self = this;
self.attributeName = ko.observable();
self.attributes = ko.observableArray([]);
self.attributeValues = ko.observableArray([]);
When creating an attribute in the form, knockout effectively lists the added attribute values from the array of AttributeValues:
<select multiple="multiple" height="5" data-bind="options: attributeValues, optionsText: 'Value', selectedOptions: selectedItems, optionsCaption: 'Added Values...'">
where attributeValues refers to the ViewModel's array of attributeValues.
After adding an attribute name and its associated values, upon adding the Attribute, I iterate over the observableArray attributes in the ViewModel to display a list of the added Attributes:
The Issue
The challenge arises when attempting to display a dropdown (select) for each attribute's array of attribute Values Values:
<ul data-bind="foreach: attributes">
<li>
<div>
<span data-bind="text: Name"></span>
<select multiple="multiple" height="5" data-bind="options: Values, optionsText: 'Value', selectedOptions: selectedItems, optionsCaption: 'Added Values...'">
.....removed text for brevity
However, it fails to list the Value for each AttributeValue within the Values array for each Attribute
Upon inspection, the Values property does contain the correct values.
What could be causing this issue?