Question

I have created a form with knockout that will allow the ability to give a product dynamic attributes: (i.e. size – small, med, lg). This is generated by input field and a multi select drop down.

When the fields have been filled out and the selection list which is the attribute values has been generated, I can add them to an observable attribute array.

The problem I can’t see is I need to display these attributes and their array of values, but I also need them to be editable. I wasn’t so keen on the idea of them be reloaded into the main form where it was created – but maybe that is the best way.

Maybe just listing the attributes as uneditable list of attributes

example:

Name: <span data-bind="text: attributeName"></span> <select height="5" data-bind="options: attributesValues"> <button data-bind="click: edit">Edit</button>

And if they click edit it loads it into the form that they created it from so it can be edited.

However, I wanted to see if there is a way to do inline editing and bind to the added Attributes and each of their array of attributeValues. So when they remove an attributeValue from the list, it would remove it from the array of that particular attribute.

Any thoughts?

Answer 1

So, I am not too confident I understood exactly what you are trying to do, and the one line of code you posted didn’t really clarify it. I threw this fiddle together that has a multi-select for attributes, and lets you add new products with the select attributes. Once added, the new product has those attributes as select‘s of there own, which can still be edited. If this isn’t what you are after, please try to clarify, and maybe post some more code.

Here is the fiddle