Question

我正在阅读一些经典的ToDo示例，但找不到我正在寻找的内容。我有一个'右边'和'左边'的div并排坐着。在'left-part'中，我有todo列表名称显示如下：

<ul data-bind="foreach: taskLists()"> // runs through all todo lists
    <li><span data-bind="text: title"></span></li>//displays list title                          
</ul>

点击后，我想更改'右边部分'的内容，以显示当前列表的信息。看起来像这样：

<span data-bind="text: title"></span> // title of current list
<ul data-bind="foreach: items"> // runs through all items in current list
    <li data-bind="title"> //displays item title
</ul>

我不确定将左侧的特定列表传递到右侧的最佳策略是什么。

Answer 1

你正在考虑这个错误的方法。您没有将数据从一个div传递到另一个div，您有一个视图模型，div将显示您的视图模型的状态。

因此，如果您的VM中有一个集合：

self.taskList = ko.observableArray();

您可能会为所选项目添加属性

self.selected = ko.observable();

然后添加点击处理程序以从任务列表中选择项目并将其放入selected属性

self.selectItem = function(item) {
    self.selected(item);
}

现在您的绑定可能看起来像这样：

<ul data-bind="foreach: taskLists()"> // runs through all todo lists
    <li data-bind="click: $parent.selectItem"><span data-bind="text: title"></span></li>//displays list title                          
</ul>

和

<!-- with: selectedItem -->
<span data-bind="text: title"></span>
<ul data-bind="foreach: items"> // runs through all items in current list
    <li data-bind="title"> //displays item title
</ul>
<!-- /ko -->

因此，现在单击第一个div中的项目将通过更改selected属性来更新视图模型，并且knockout将识别该属性绑定到第二个div并更新它。

Answer 2

您应该在右侧面板中绑定另一个可观察。然后使用单击处理程序，将选定列表添加到右侧面板可观察对象中，从而更新右侧面板元素。这是绑定和knockoutJs用于什么。

 self.rightList = ko.observable();

 // click handler
 self.addToRightList = function(list){
     self.rightList(list);
 }

和

<ul data-bind="foreach: taskLists()"> // runs through all todo lists
    <li><span data-bind="text: title, click: $parent.addToRightList"></span></li>//displays list title                          
</ul>

和

  <div data-bind="with: rightList">
     <span data-bind="text: title"></span> // title of current list
     <ul data-bind="foreach: items"> // runs through all items in current list
        <li data-bind="title"> //displays item title
     </ul>
</div>

在Knockout.js中将数据从一个元素传递到另一个元素

2 个答案: