2013-10-22 56 views
1

我正在研究將列出幾個項目的基本樹視圖,並且希望能夠根據用戶輸入更改子項目的文本。將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/

+0

你的小提琴有控制檯錯誤 - 拒絕從'https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js'執行腳本,因爲它的MIME類型('text/plain')不可執行,並且啓用嚴格的MIME類型檢查。 –

回答

1

當寫text: childOne()你asigning的childOne的價值觀察的,而不是函數本身。

所以你text將包含undefined,而不是ko.observable,你可以卸下()解決這個問題:

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

演示JSFiddle

+0

魔法我說。在我的環境中快速測試 – wjhguitarman

+0

在JSFiddle之外成功實現解決方案時遇到了一些麻煩,但這更多地涉及到背景干擾的問題。標記爲答案,因爲一旦我將我的環境中的其餘部分整理好,它就可以正常工作。 – wjhguitarman

+1

可能你需要在你的viewModel的根目錄中包含childone,比如'var childOne = ko.observable(); VAR視圖模型= {childOne:childOne, 菜單:[文字: 「項目1」, 孩子:[{ 文字:childOne},{ 文字: 「孩子1B」} ]}' – nemesv