3

我有一个 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}">

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

我的问题是：如何使用带有可观察和静态属性混合的视图模型将我的 AJAX 调用（多个结果对象）返回的数据数组绑定到 DOM？

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

4

2 回答 2

2

看起来您在滥用$data“特殊上下文属性”（正如knockout.js 文档所称的那样）。报价：

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

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

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

<div data-bind="template: {name: 'results-template', foreach: Descriptions}">
于 2013-05-18T01:06:24.193 回答
1

我们可以（在某种程度上）看到你的目标。您的问题不是 100% 清楚，因此不可能给出明确的答案（我建议阅读KnockoutJS 教程，因为您似乎混淆了一些基本的 KO 概念）。尽管如此，这是您可以采取的一个方向。

如另一个答案中所述，您使用template绑定，但您没有说明为什么需要它，因为foreach绑定就足够了。该模板的数据将是Descriptions可观察数组，而不是$data. 你的整个视图（当保持使用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" }, ... ]

请参阅此小提琴以进行演示。

选项 2

如果您的描述只是平面字符串，那么您的视图模板需要更改并且它确实使用了$data变量：

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

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

["Feels good", ... ]

请参阅此小提琴以进行演示。

作为脚注，我注意到：

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

在我的示例小提琴中，我改变了这两件事。

于 2013-05-18T08:49:00.170 回答