Question

我有一个返回对象数组的AJAX请求（结果）。在成功回调函数中，使用以下函数应用绑定：

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中，数据使用以下命令绑定到元素：

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

然后是一个模板类，它绑定视图模型的各个属性。

我的问题是：如何使用带有observable和static属性混合的viewmodel绑定我的AJAX调用返回的数据数组（多个结果对象）？

我正在使用的foreach循环应该创建一个模板并将返回数组中的每个对象绑定到一个单独的div，但它看起来好像是在尝试绑定返回数组中的根对象，这是null（未命名的数组））。

Answer 1

看起来你正在滥用$data“特殊上下文属性”（因为knockout.js docs调用它）。引用：

但是，如果你想引用数组条目本身（不只是它的一个属性）呢？在这种情况下，您可以使用特殊的上下文属性$ data。在foreach块中，它表示“当前项目”。

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

您是否尝试过这样做？我不能确定这是否会做你想要的，而不会看到你正在应用它的绑定的其余HTML，但我认为这适用于你的模板代码：

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

Answer 2

我们可以（有点）看到你要去哪里。你的问题不是100％明确，所以不可能给出一个明确的答案（我建议通过the KnockoutJS tutorials，因为你似乎有一些基本的KO概念混淆了）。尽管如此，这是你可以采取的一个方向。

正如在另一个答案中所提到的，您使用template绑定，但是您没有指出为什么您需要它，因为foreach绑定应该足够。该模板的数据将是Descriptions可观察数组，而不是$data。你是整个View（在保持使用template绑定时）应该是这样的：

选项1

<script type="text/html" id="results-template">
    <span data-bind="text: desc"></span><br />
</script>

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

这假设你的Descriptions是复杂的对象，如下所示：

[{ id: 12, desc: "Feels good" }, ... ]

请参阅this fiddle了解演示。

选项2

如果您的描述只是扁平字符串，那么您的View模板需要更改，并且使用$data变量：

<script type="text/html" id="results-template">
    <span data-bind="text: $data"></span><br />
</script>

这假设您的数据如下所示：

["Feels good", ... ]

请参阅this fiddle了解演示。

作为脚注，我注意到了：

self.id是不可观察的，是故意的吗？
您在应用绑定时使用特定的target，但是根据您的问题，我认为您没有理由要求它？

在我的例子中，我改变了这两件事。

使用Knockout JS将ApplyBindings添加到数组中

2 个答案:

选项1

选项2