Question

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

我正在创建一个可以处理icals的日历组件，我正在做这样的事情来渲染我的“事件”（日历项目）：

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

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

我为当前日期的每个事件制作一个日历项目，然后我将事件和事件的原始副本传递给它（如果您“编辑”某个事件但是取消更改，将用于重置）< / p>

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

Ractive.js：无法计算“$ {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组件绑定

1 个答案: