Knockout.js ko.applyBindings() 将视图模型的一部分绑定到单独的 div

Question

我有一个视图模型，我使用剔除映射器对其进行映射，以从中创建可观察的属性。

var viewModel= {
    "Name": "Josh",
    "Position": "Developer",
    "PersonalInfo": [{
         "CashierMail": "Test@testin.com",
          "Phone": "1234",

    }]    
  }

var myViewModel = ko.mapping.fromJS(viewModel); 

我有以下html：

<div>
The name is <span data-bind="text: Name"></span>
    <div id="info">
        Mail is <span data-bind="text: CashierMail"></span>
        <br>
        Position is <span data-bind="text: Position"></span>
        <br>
        Phone is <span data-bind="text: Phone"></span>
    </div>
</div>

这是我的原始代码，仅使用来自 myViewModel 的一个绑定，它可以工作：

http://jsfiddle.net/KHFn8/837/

我想要完成的是 id 为“info”的 div 中的字段，这些字段将使用来自 Personal Info 可观察数组的数据进行填充。换句话说，如果<div id="info"> 是一个组件 - 将使用它自己的数据源进行填充。

所以我尝试这样的事情：

ko.applyBindings(myViewModel);
ko.applyBindings(myViewModel.PersonalInfo[0], document.getElementById("info"));

但它不起作用。

但我想做上面描述的事情。这是不工作的代码：

http://jsfiddle.net/KHFn8/833/

我读到了这个与我的案例类似的主题，但仍然无法使其工作：

Knockout.js ko.applyBindings() hierarchy binding

我对 javascript 和淘汰赛相当陌生，非常感谢任何有关工作代码的帮助。感谢您的时间和精力。

Answer 1

当您尝试访问 observableArray 中的项目时，您需要访问底层数组，例如：

myViewModel.PersonalInfo()[0]

http://jsfiddle.net/rniemeyer/KHFn8/844/