Search code examples
javascriptractivejs

Ractive component bindings over iteration

I need some help with figuring out how Ractive does it's component binding(as described here: Ractive - Components) when inside a loop.

I'm making a calendar component which can handle icals and i'm doing something like this to render my "events"(calendar items):

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

where eventsByDate would contain a map of dates as keys and arrays of events as values.

I make a calendar item for each event on the current date and i pass it the event and an original copy of the event(which will be used to reset in case you "edit" an event but then cancel the changes)

This works fine until i change what eventsByDate contains. Let's say i go to the next week in the calendar, then the eventsByDatewould be changed to something else. Then i get some error saying something like this:

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

I'm wondering how i can avoid this. Obviously when the event is removed from eventsByDate i don't want to render it anymore, so why is this still being run?

I made a jsfiddle to demonstrate the behavior(note that the other code is not too similar to what i've got but this works to demonstrate the problem): JSFiddle

Bring up the console, generate some events(by clicking on the different days), wait 5 seconds and watch the errors pop up in the console.

Solution

  • In latest version of Ractive 0.7.3 when you remove an element of an array that does not have an equivalent item in the new array, it will try and evaluate the expression and give the console warning you are seeing. While it still functions correctly, if you want to get rid of the console warning, protect against the empty object:

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

    In edge version 0.8.0 (next release), you can see the erroneous console warning is gone: http://jsfiddle.net/afadsh44/3/.