如何使用 Knockout 在 parent div 之间动态移动 child div？

Question

在我的示例中，我有三个 parent divs（红色）...第一、第二和第三。

最初我想把我的 child div（黄色）放在 "Second" div.

在此之后，我想通过更改 columnID 在 parent div 之间移动 child div。

这是我的测试代码，但它不起作用...

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 实现吗？

我的真实项目是一个看板系统，其中任务的 ID 指定任务应该在哪个看板列中 - 然后只需更改任务列 ID，任务就应该移动到另一个看板列。

更新：我更新了代码片段和 Fiddle 以更正 HeyJude 指出的错误 - 但单击按钮时它仍然不会在列之间移动。

Answer 1

这只是一个小错误。

改变这个：

viewModel.columns.push(c);

...进入这个：

viewModel.columns.push(column);

如何使用 Knockout 在 parent div 之间动态移动 child div？

How can I dynamically move child div between parent divs using Knockout?

javascript

knockout.js