我需要一些帮助来弄清楚 Ractive 在循环内如何进行组件绑定(bind)(如下所述: Ractive - Components )。
我正在制作一个可以处理 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 }}
在边缘版本0.8.0
(下一个版本)中,您可以看到错误的控制台警告消失了:http://jsfiddle.net/afadsh44/3/ .
关于javascript - 迭代过程中的 react 组件绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35136815/