1

我正在开发一个基本的树视图，它将列出一些项目，并且我希望能够根据用户输入来更改子项目的文本。

看法：

<div class="treeviewUI">
 <p>
   Test Tree View Model
 </p>
 <p><strong>Enter Child One: <input data-bind="value: $parent.childOne"/></strong> <!-- also tried just childOne -->
 </p>
 <ul id='treeMenu' data-bind="foreach: menu">
  <li>
     <div data-bind="click: function() {$parent.toggle($data)}">
        <span data-bind="text: $data.text></span>
        <ul data-bind="visible: $data.expanded,
                       foreach: {data: $data.children, as 'child' }">
          <li data-bind="text:child.text"/>
        </ul>
     </div>
  </li>
 </ul>

和视图模型：

define([knockout'], function (ko) {

   var childOne = ko.observable();
   var viewModel = {
     menu: [
             text: "Item 1",
                children: [
                    { text: childOne() },
                    { text: "child 1b" }
                ],
                expanded: ko.observable(false)
            },
            {
                text: "Item 2",
                children: [
                    { text: "child 2a" },
                    { text: "child 2b" }
                ],
                expanded: ko.observable(false)
            }
    ],
    toggle: function(node) {
        node.expanded(!node.expanded());
    }
};

return viewModel;

});

但是，为 输入输入childOne不会更新 treeView 子项。我是否缺少绑定或只是使用了错误类型的绑定。还是这里发生了更复杂的事情？

JSFIDDLE 链接：http: //jsfiddle.net/xQ7GS/54/

4

1 回答 1

1

在编写时text: childOne()，您正在分配childOne可观察对象的值，而不是函数本身。

因此，您的text遗嘱包含undefined而不是ko.observable，您可以通过删除以下内容来解决此问题()：

children: [
   { text: childOne },
   { text: "child 1b" }
],

演示JSFiddle。

于 2013-10-22T20:45:55.353 回答