knockout.js - 基于未命名数组访问映射生成的 knockout 模型中的值

Question

我正在从网络 API 检索 Json 数据。数据的格式为:

[{"CustomerID":1,"CustomerName":"John"},{"CustomerID":2,"CustomerName":"Sally"}]

真实的数据自然更复杂，但它的格式是没有“名称”的项目数组，例如 {"customers":[...]}。我无法更改传递的数据，所以这是我必须忍受的。

我想使用映射插件在此数据上创建一个 knockout 模型并将其绑定(bind)到 View :

var vmCustomers = ko.mapping.fromJS(jsonObject);
ko.applyBindings(vmPartners);

我现在的问题是我不知道如何访问 HTML 页面上的数据。如果我检查 vmCustomers 并在 _latestValue 中向下钻取，我可以看到数据已加载到模型中。

我希望能够在 HTML 中做的是相应的事情

foreach: customers

我可以通过手动构建 knockout 模型并使用 .mapping 来填充它(甚至手动填充)来让它工作，但我想避免这种情况。我正在寻找的是一种从 HTML 代码中获取 knockout 模型中顶部数组的方法。

我是 knockout 的新手，所以我可能缺少一些基本的东西。

Answer 1

不要对抗KO。只需创建一个合适的 View 模型，其中您有一个 customers 属性来保存您的数据，这是 KO 的做法。无论如何，当你有地方放置额外的逻辑/数据时，viewmodel 在未来会很方便。

var viewModel = { customers: ko.mapping.fromJS(jsonObject); }
ko.applyBindings(viewModel);

然后您可以在 View 中显示您的data-bind="foreach: customers"。

但是，如果您不想拥有 View 模型并且想绑定(bind)到一个数组，您将无法使用像“customers”这样的名称来访问它，您需要使用 current context 来引用它。 : 使用 $data 属性:

data-bind="foreach: $data"

JS

var vmCustomers = ko.mapping.fromJS(jsonObject);
ko.applyBindings(vmCustomers);

演示 JSFiddle .