将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));