javascript - 使用 Knockout JS 将绑定(bind)应用于数组

Question

我有一个返回对象数组(结果)的 AJAX 请求。在成功回调函数中，使用以下方法应用绑定(bind):

success: function(data) {
                ko.applyBindings(new ResultsViewModel(data), target);
         }

其中 target 是目标 DOM 元素，ResultsViewModel 的创建类似于:

function ResultsViewModel(model) {
    var self = this;
    self.text = ko.observable(model.text);
    self.id = model.id;
    self.Descriptions = ko.observableArray(model.descriptions);
}

在我的 HTML 中，数据使用以下方式绑定(bind)到元素:

<div data-bind="template: {name: 'results-template', foreach: $data}">

然后是绑定(bind) View 模型的各个属性的模板类。

我的问题是:如何使用混合了可观察属性和静态属性的 View 模型将 AJAX 调用(多个结果对象)返回的数据数组绑定(bind)到 DOM？

我正在使用的 foreach 循环应该创建一个模板并将返回数组中的每个对象绑定(bind)到一个单独的 div，但它看起来好像试图绑定(bind)返回数组中的根对象，该数组为空(未命名数组) ).

Answer 1

看起来您在滥用 $data“特殊上下文属性”(如 knockout.js docs 所称)。引用:

But what if you want to refer to the array entry itself (not just one of its properties)? In that case, you can use the special context property $data. Within a foreach block, it means “the current item”.

不过，您并没有真正使用 foreach 绑定(bind):它是一个模板绑定(bind)。在 template binding 的文档中，他们从不使用 foreach: $data 语法，它总是 foreach: somePropOnTheViewModel。

您尝试过这样做吗？我无法确定这是否会在没有看到您正在应用它的绑定(bind)的其余 HTML 的情况下执行您想要的操作，但我认为这适用于您的模板代码:

<div data-bind="template: {name: 'results-template', foreach: Descriptions}">