代码之家 › 专栏 › 技术社区 › Liero

如何使用数据将ObservableArray传递到模板

knockout-3.0 knockout.js javascript

0

Liero · 技术社区 · 6 年前

我试图将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传递给模板,而不是数组。

是否可以不更改JS?

3 回复 | 直到 6 年前

1

0

Philip Bijker 6 年前

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>

2

0

pim 6 年前

我想这是你的问题 binding context . 我经常发现在结束前留下下面的调试片段是非常宝贵的 </body> 在开发期间标记,在部署期间删除/注释掉。这将显示关于你的应用程序的所有信息,特别是传递给你的信息。 .applyBindings(...) . 尤其重要的是价值层次。

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

你所要做的绝对是可能的。这里是一个 example 证明这一点。注意 $data.myObservableArray . 用法 $data 这里是从当前绑定上下文请求值。

作为一个建筑建议,我建议你喜欢 components 在几乎所有情况下,都是通过模板。它们提供了更大的可重用性、异步处理和关注点分段。

3

0

Amit Bhoyar 6 年前

您的代码几乎是完美的,我只是将模板名放在“”中,并用()传递数组以传递评估值,它是有效的。

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>