knockoutjs可見性刷新已更新

Question

這裏是我的簡化模型：

 var GoalItem = function(id, type, name, authorId, author, children) { 
     this.id = ko.observable(id); 
     this.type = ko.observable(type); 
     this.name = ko.observable(name);  
     this.authorId = ko.observable(authorId); 
     this.author = ko.observable(author); 
     this.children = ko.observableArray(children || []); 
     this.isPage = ko.computed(function(){ return type == 'page' ? true : false; }, this); 
     this.isFile = ko.computed(function(){ return type == 'file' ? true : false; }, this); 
     }; 

     var GoalModel = function() { 
     this.list = ko.observableArray([ 
      new GoalItem(1, 'page', 'Getting started', 0, '', [ 
       new GoalItem(2, 'page', 'Getting started 1.1', 0, ''), 
       new GoalItem(3, 'video', 'Video', 0, '', [ 
        new GoalItem(4, 'data', 'Data', 0, ''), 
        new GoalItem(5, 'test', 'Test', 0, '', [ 
         new GoalItem(6, 'page', 'Test prep', 0, '', [ 
          new GoalItem(7, 'video', 'Test video', 0, ''), 
          new GoalItem(8, 'file', 'Test file', 0, '') 
         ]) 
        ]), 
        new GoalItem(9, 'page', 'Sample page', 0, '') 
       ]) 
      ]), 
      new GoalItem(10, 'page', 'More data tracking', 0, '', [ 
       new GoalItem(11, 'data', 'Data 1', 0, ''), 
       new GoalItem(12, 'data', 'Data 2', 0, '') 
      ]) 
     ]); 
     } 

和一些標記使用可見性來確定哪些HTML片段顯示

<div data-bind="visible: currentItem().isPage"> 
    applicable to pages only 
</div> 

與

<div data-bind="visible: currentItem().isFile"> 
    applicable to files only 
</div> 

我有一些代碼，當用戶點擊一個GoalItem被渲染成樹視圖wil l負載和隱形將負責顯示/隱藏

如果用戶現在在UI中爲當前GoalItem的「type」屬性進行更改，如果不重新觸發isvisible - 因此如果類型從「頁」到「文件」

目前它似乎沒有工作，希望這個解釋是有道理的，如果不是，我會嘗試添加更多的細節。

另一方面，從閱讀的角度來看，我是否需要「移除」或「替換」可觀察數組中的項目，以便重新觸發isvisible：binding「？ - 如果是的話 - 或者作爲一個相關的問題 - 什麼是最好的方式來找到一個項目在observableArray基於這個.id - baring記住，該項目可以是「深」內的兒童？

任何反饋或幫助，非常感謝

Answer 1

您計算觀測將觸發UI更新，但他們並不十分正確：

this.isPage = ko.computed(function(){ return type == 'page' ? true : false; }, this); 
    this.isFile = ko.computed(function(){ return type == 'file' ? true : false; }, this); 

這些應該看起來更像是：

this.isPage = ko.computed(function() { 
     return this.type() == 'page' ? true : false; 
    }, this); 

    this.isFile = ko.computed(function() { 
     return this.type() == 'file' ? true : false; 
    }, this); 

現在，你實際上已經進入了觀察到的值，因此計算觀察到對type觀察到的依賴。當它改變時（通過設置它的值如this.type('file');，計算出的可觀察值將被重新忽略，並且任何用戶（你的用戶界面）都會得到通知）