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

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> 标记之前留下以下调试片段非常宝贵，在部署期间留下 removed/commented 。这将显示关于您的应用程序的所有淘汰赛 "knows"，特别是传递到 .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 returns 未定义剔除可观察对象，它未在 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 传递给模板

How to pass observableArray to template using data

javascript

knockout.js

knockout-3.0