Editable data inside row

[mroeling]

Consider a table with cells, containing inputs that are coming from the repeated rows. The original code contains more cells, but I don't think that's needed in this example.

                <tr
                    reorderable-repeat.for="rowIndex of rows.length"
                    reorderable-dnd-preview="drawPreview"
                    reorderable-dnd-can-drag.bind="false">
                    <td>
                        <input type="text" value.bind="rows[$parent.rowIndex]">
                    </td>
                </tr>

This is the proposed way for a bound two-way form item, see https://aurelia.io/docs/templating/basics#repeaters, last paragaph. It did work before adding the reorderableRepeat option.

How to solve this in the reorderable-repeat.for? It returns an error "collection must be an instance of Array, Map or Set".

[3cp]

First, you don't need $parent for rowIndex since rowIndex is right in your current context. Second, there is no feature reorderable-dnd-can-drag.

Back to the topic, that's not how reorderable repeat works, it can only mutate an array bound to it. rows.length is not an array.

Your rows is a simple array of strings. String is immutable in JS, so when you edit, the reference object in the array changes (which reorderable-repeat expects no change in the array).

You can get away from this by using an object to hold the value inside the array, so that you don't lose the original references in the array for reordering.

[
  { value: "foo" },
  { value: "bar" }
]

reorderable-repeat.for="row of rows"
<input value.bind="row.value">

[mroeling]

Thanks for the response!