Question

我正在尝试将observableArray传递给模板：

<template id="my-template">
    <pre data-bind="text: JSON.stringify($data)"></pre>
    <!-- prints: { isWarning: false } --/>
</template>


<div data-bind="template: { name: my-template, data: { errors: myObservableArray, isWarning: false }}"></div>

看来observableArray无法作为数据传递。我试图用()来称呼它：

template: { 
   name: my-template, 
   data: { errors: myObservableArray(), isWarning: false }
}

这将打印{ errors: [], isWarning: false }。

但是我想将ObservableArray而不是Array传递给模板。

是否可以不更改JS？

Answer 1

我猜这是您的binding context的问题。我经常发现，在开发过程中紧接</body>标记之前留下以下调试代码片段，在部署过程中将其删除/注释是非常宝贵的。这将显示所有有关您的应用程序的剔除信息，特别是传递到.applyBindings(...)中的信息。特别重要的是价值层次。

<pre data-bind="text: ko.toJSON($root)"></pre>

您尝试做的事情绝对有可能。这是example的演示。注意$data.myObservableArray。此处$data的用法是从当前绑定上下文中请求值。

作为一种体系结构建议，在几乎所有情况下，我都建议使用components而不是模板。它们提供了更高的可重用性，异步处理和关注点细分。

Answer 2

您的代码几乎是完美的，我只是将模板名称放在''中，并使用（）传递了您的数组以传递评估值，

function VM(){
var self = this;
self.myObservableArray = ko.observableArray(["error1","error2","error3","error4","error4"]);
self.isWarning = ko.observable(false);
}

ko.applyBindings(new VM())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="my-template">
    <pre data-bind="text: JSON.stringify($data)"></pre>
</template>


<div data-bind="template: { name: 'my-template', data: { errors: myObservableArray(), isWarning: isWarning() }}"></div>

Answer 3

observableArray已正确传递到模板。之所以没有打印出来，是因为JSON.stringify返回的剔除可观察值未定义，而pre元素中未呈现该值。要使示例工作，请改用ko.toJSON。看看下面的代码段：

ko.applyBindings({ 
  myObservableArray: ko.observableArray(['error 1', 'error 2', 'error 3'])
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<template id="my-template">
  <!-- ko foreach: errors -->
  <span data-bind="text: $data"></span>
  <!-- /ko -->
  <pre data-bind="text: ko.toJSON($data)"></pre>
</template>


<div data-bind="template: { name: 'my-template', data: { errors: myObservableArray, isWarning: false }}"></div>

如何使用数据将observableArray传递给模板

3 个答案: