【问题标题】:Ractive component bindings over iteration迭代中的 Ractive 组件绑定
【发布时间】:2016-02-01 17:36:36
【问题描述】:

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

我正在制作一个可以处理 icals 的日历组件,并且我正在做这样的事情来呈现我的“事件”(日历项):

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

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

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

在我更改 eventsByDate 包含的内容之前,这可以正常工作。假设我去日历中的下周,那么eventsByDate 将更改为其他内容。然后我收到一些错误,如下所示:

Ractive.js:无法计算“${JSON-parse(JSON-stringify(eventsByDate-20160201-0))}”

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

我制作了一个 jsfiddle 来演示该行为(请注意,其他代码与我所拥有的不太相似,但这可以演示问题): JSFiddle

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

【问题讨论】:

    标签: javascript ractivejs


    【解决方案1】:

    在最新版本的 Ractive 0.7.3 中,当您删除在新数组中没有等效项的数组元素时,它将尝试评估表达式并给出您看到的控制台警告。虽然它仍然可以正常工作,但如果您想摆脱控制台警告,请防止出现空对象:

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

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

    【讨论】:

    • 啊!这是一个很好的答案!感谢您让我知道即将发布的版本。这显然不是我问题的原因,因为它在 fiffdle 中起作用,但我仍然对警告感到好奇。再次感谢您的出色回答!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-18
    • 1970-01-01
    • 2021-07-03
    • 1970-01-01
    • 2016-11-15
    相关资源
    最近更新 更多