迭代中的 Ractive 组件绑定

Question

我需要一些帮助来弄清楚 Ractive 在循环中如何进行组件绑定（如此处所述：Ractive - Components）。

我正在制作一个可以处理 icals 的日历组件，我正在做类似的事情来呈现我的 "events"(calendar items):

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

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

我为当前日期的每个事件制作了一个日历项，并将事件和事件的原始副本传递给它（如果您 "edit" 一个事件然后取消，它将用于重置变化）

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

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

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

我制作了一个 jsfiddle 来演示该行为（请注意，其他代码与我得到的不太相似，但这可以演示问题）： JSFiddle

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

Answer 1

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

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

在边缘版本 0.8.0（下一个版本）中，您可以看到错误的控制台警告消失了：http://jsfiddle.net/afadsh44/3/.

迭代中的 Ractive 组件绑定

Ractive component bindings over iteration

javascript

ractivejs