將Knockout子視圖綁定到多個視圖？

Question

我被困在一個基本的JS綁定問題上。我有一個主視圖模型綁定到我的單頁應用程序的外殼頁面。這個masterviewmodel控制當前可見的視圖（使用Sammy JS）。它還擁有對視圖綁定的子視圖模型的引用。

var app = function() { 
    var self = this; 

    self.State = ko.observable('home'); 

    self.Home = ko.observable(new homepageVm()); 
    self.User = ko.observable(new userInfoVm()); 
    self.Request = ko.observable(new requestVm()); 
}; 

用戶視圖模型具有結合喜歡這個觀點：

<div data-bind="with: User, visible: State() === 'user'"> 
    .. snip .. 
</div> 

與該：結合可以確保適當的subviewmodel被綁定到視圖。 此方法適用於主視圖和用戶信息視圖。

requestVm使用嚮導樣式UI並需要綁定到多個視圖。這是我目前卡住的地方。

<div data-bind="with: Request, visible: State() === 'request-step-1'"> 
    .. snip .. 
</div> 

<div data-bind="with: Request, visible: State() === 'request-step-2'"> 
    .. snip .. 
</div> 

<div data-bind="with: Request, visible: State() === 'request-step-3'"> 
    .. snip .. 
</div> 

的綁定似乎當我啓動該網站（剔除未拋出任何約束力的錯誤），但是當我開始通過虛擬機推送數據不再更新UI，好像所有的綁定破做工精細（即使是那些綁定了單個視圖的視圖，例如用戶VM）。

如果我僅包含嚮導第一步的視圖，這使得我在請求虛擬機上只有一個綁定而不是三個，那麼應用中的所有綁定都會再次開始工作！

我失去了什麼是造成這一點。敲除只能將一個可觀察物體綁定到一個單一元素上嗎？還是我嘗試了一些不受支持的東西？

更新： 似乎我的虛擬機中的observableArrays正在發生一些事情。對簡單觀察對象的綁定工作正常。

這裏是虛擬機中的一個：

function userInfoVm() { 
    var self = this; 

    self.UserName = ko.observable(); 

    self.Beun = ko.observable(); 

    self.LoadingUser = ko.observable(false); 
    self.LoadingObjects = ko.observable(false); 

    self.UserData = ko.observableArray([]); 
    self.UserObjects = ko.observableArray([]); 

    self.LoadUser = function (userName) { 

     self.LoadingUser(true); 

     $.get('UserData/UserDetail', { username: userName }, function (details) { 
      self.UserData(details); 
      self.Beun(JSON.stringify(details)); 

      self.LoadingUser(false); 
     }); 
    }; 

    self.LoadObjects = function (userName) { 

     self.LoadingObjects(true); 

     $.get('UserData/UserObjects', { username: userName }, function (objects) { 
      alert(JSON.stringify(objects)); 
      self.UserObjects([objects]); 
      self.LoadingObjects(false); 
     }); 
    }; 

    self.Load = function (userName) { 
     self.UserName(userName); 

     self.UserData(null); 
     self.UserObjects(null); 

     self.LoadUser(userName); 
     self.LoadObjects(userName); 
    }; 
}; 

和從消耗數據的數據視圖，所述VM：

<div data-bind="with: User, visible: State() === 'user'"> 
    <h1> 
     <button class="backbutton" onclick="history.back();"> 
     </button> 
     Details for user <span data-bind="text: UserName"></span> 
    </h1> 
    <div class="display detail"> 
     <table> 
      <tbody data-bind="foreach: UserData"> 
       <tr> 
        <td class="property" data-bind="text: Key"> 
        </td> 
        <td class="value" data-bind="text: Value"> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="loader" data-bind="visible: LoadingUser"> 
      Please wait while we process your request... 
     </div> 
    </div> 
    <div class="display detail"> 
     <h1> 
      Objects and services for user <span data-bind="text: UserName"></span> 
     </h1> 
     <table class="detailtable"> 
      <tbody data-bind="foreach: UserObjects"> 
       <tr> 
        <td class="value"> 
         <a class="service" data-bind="text: Value, attr: { href: '#/service/' + Key }" href="#"> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <div class="loader" data-bind="visible: LoadingObjects"> 
      Please wait while we process your request... 
     </div> 
    </div> 
    Details for user <span data-bind="text: Beun"></span> 
</div> 

的數組不notifing大約是數據的UI餵給他們。 其他可觀察對象，包括包含來自AJAX調用的字符串化數據的.Beun包，都會按預期進行更新。

Answer 1

你是從服務器接收什麼內容？

你可以嘗試使用eval（對象）將數據（字符串）轉換爲對象，並使用foreach循環內的映射插件（knockout.mapping.js）將它們轉換爲可觀察數組，如果要執行此操作手動。

var data = '[{ "Id": 1, "Titel": "Title1", "Description": "Description 1" }, { "Id": 2, "Titel": "Title 2", "Description": "Description 2" }, { "Id": 3, "Titel": "Title 3", "Description": "Description 3"}]'; 
//fist convert your string to JS-objects using eval() ; then to observableArray using mapping pluging 
self.UserObjects = ko.mapping.fromJS(eval(data));