迭代中的反应组件绑定

Ractive component bindings over iteration

本文关键字：组件 绑定 迭代      更新时间：2023-09-26

我需要一些帮助来弄清楚 Ractive 在循环内如何进行组件绑定(如此处描述：Ractive - 组件(。

我正在制作一个可以处理 icals 的日历组件，我正在做这样的事情来渲染我的"事件"(日历项目(：

{{#each dateInWeek}}
  {{#each eventsByDate[this]}}
    <CalendarItem event={{this}} originalEvent={{JSON.parse(JSON.stringify(this))}} />
  {{/each}}
{{/each}}

其中eventsByDate将包含作为键的日期映射和作为值的事件数组。

我为当前日期的每个事件制作一个日历项目，并将事件和事件的原始副本传递给它(如果您"编辑"事件但随后取消更改，它将用于重置(

在我更改eventsByDate包含的内容之前，这工作正常。假设我转到日历中的下一周，然后eventsByDate将更改为其他内容。然后我收到一些错误，说这样的话：

Ractive.js： Failed to compute "${JSON-parse(JSON-stringify(eventsByDate-20160201-0((}">

我想知道如何避免这种情况。显然，当事件从eventsByDate中删除时，我不想再渲染它了，那么为什么它仍在运行呢？

我

做了一个jsfiddle来演示行为(请注意，其他代码与我所拥有的不太相似，但这可以演示问题(：JSFiddle

打开控制台，

生成一些事件(通过单击不同的日期(，等待 5 秒钟，然后观察控制台中弹出的错误。

在最新版本的 Ractive 0.7.3 中删除数组中没有等效项的元素时，它将尝试计算表达式并给出您看到的控制台警告。虽然它仍然正常运行，但如果要摆脱控制台警告，请防止空对象：

eventClone={{ this ? JSON.parse(JSON.stringify(this)) : null }}

在 Edge 版本 0.8.0(下一版本(中，您可以看到错误的控制台警告已消失：http://jsfiddle.net/afadsh44/3/。

相关文章：