我正在研究將列出幾個項目的基本樹視圖,並且希望能夠根據用戶輸入更改子項目的文本。將TreeView子項綁定到ko.observables
視圖:
<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
不更新樹形目錄子項目。我錯過了一個綁定,或者只是使用了錯誤的綁定類型。還是有更復雜的事情發生在這裏?
的jsfiddle LINK:http://jsfiddle.net/xQ7GS/54/
你的小提琴有控制檯錯誤 - 拒絕從'https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js'執行腳本,因爲它的MIME類型('text/plain')不可執行,並且啓用嚴格的MIME類型檢查。 –