如何使用 Knockout 在父 div 之间动态移动子 div？

Question

In my sample, I have three parent divs (colored red) ... First, Second and Third.

Initially I want to put my child div (colored yellow) in the "Second" div.

After this, I want to move the child div between parent divs just by changing columnID.

Here's my test code that does not work...

 var dataColumns = [{ id: 1, text: "First" }, { id: 2, text: "Second" }, { id: 3, text: "Third" } ] var viewModel = { data: ko.observableArray([]), columns: ko.observableArray([]), }; dataColumns.forEach(function(c) { let column = { id: c.id, text: c.text, items: ko.computed(function() { return ko.utils.arrayFilter(viewModel.data(), function(d) { return d.columnID() === c.id; }); }, this) }; viewModel.columns.push(column); }); ko.applyBindings(viewModel); let item = { columnID: ko.observable(2), caption: "I am the moving item" }; viewModel.data.push(item); function MoveTo(index) { item.columnID(index); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div data-bind="template: { name: 'columnTemplate', foreach: columns, as: 'column' }"></div> <script type="text/html" id="columnTemplate"> <div style="background-color: red;"> <div data-bind="text: text"></div> <div data-bind="template: { name: 'itemTemplate', foreach: column.items, as: 'item' }"></div> </div> </script> <script type="text/html" id="itemTemplate"> <div style="background-color: yellow;"> <div data-bind="text: caption"></div> </div> </script> <button onclick="MoveTo(1)">Move to column 1</button> <button onclick="MoveTo(2)">Move to column 2</button> <button onclick="MoveTo(3)">Move to column 3</button>

Fiddle: https://jsfiddle.net/MojoDK/at8grkwe/3/

Is my goal impossible to do with Knockuot?

My reallife project is a kanban system, where the id of the task specify which kanban column the task should be in - and then just by changeing then tasks columnID, the task should be moved to another kanban column.

UPDATE: I updated snippet and Fiddle to correct the error HeyJude pointed out - but it still doesn't move between columns when clicking the buttons.

Answer 1

It's only a small mistake you've got there.

Change this:

viewModel.columns.push(c);

... into this:

viewModel.columns.push(column);