Как я могу динамически перемещать дочерние элементы div между родительскими элементами div с помощью Knockout?

Question

В моем примере у меня есть три родительских элемента div (красного цвета) ... Первый, Второй и Третий.

Изначально я хочу поместить свой дочерний элемент div (красного цвета) в элемент «Second».

После этого я хочу переместить дочерний div между родительскими div, просто изменив columnID.

Вот мой тестовый код, который не работает ...

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/

Моя цель невозможна для Knockuot?

Мой реальный проект - это система kanban, в которой идентификатор задачи определяет, в каком столбце kanban должна быть задача, а затем, просто изменив затем columnID задачи, задача должна быть перемещена в другой столбец kanban.

ОБНОВЛЕНИЕ: я обновил сниппет и Fiddle, чтобы исправить ошибку, указанную HeyJude - но она все еще не перемещается между столбцами при нажатии кнопок.

Answer 1

Это ваша маленькая ошибка.

Измените это:

viewModel.columns.push(c);

... на это:

viewModel.columns.push(column);