Knockout.js ko.applyBindings（）将viewmodel的一部分绑定到单独的div

我有一个视图模型，我使用knockout映射器映射它，从中创建可观察的属性

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>

但它不起作用

但是我想做我上面描述的事情。以下是不起作用的代码：

我阅读了这个与我的案例类似的主题，但仍然无法使其发挥作用：

---

我对javascript和knockout还比较陌生，非常感谢您对工作代码的任何帮助。感谢您花费的时间和精力。

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

myViewModel.PersonalInfo（）[0]

请帮我解决这个问题

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