Reaction Meteor Redraws each entity in pens Each cycle when only 1 record is updated

Question

The application is deployed here: memoryapp.meteor.com source is available in the git repository here: https://github.com/SnappyCroissant/memoryapp

To reset, run the application

 Cards.update({}, {$set: {state: 'play'}}, {multi: true}) 

from the console.

I know that it’s bad to have client access to such collections, the application is far from ready for production. I just find my way through Meteor.

Currently, when any update is performed in Maps, the entire DOM redraws, with the exception of those elements that I called persistency on. As far as I know, although the elements should be updated only during the update, or did I misunderstand how reactivity works?

The only real dynamic change that occurs in the script is that the 'state' property of the objects in the Maps changes. And yet, it redraws every property and every DOM element, unless explicitly declared.

Is it because they are all passed to the template in one array? If so, what is the best alternative method to do this.

The structure is a small hash because it was a learning experience, all the important bits for the problem (as far as I know) live in client/memory.js and server/model.js

Answer 1

To get the reactive implementation of #each , you need to pass the LocalCollection.Cursor object directly to #each . The array will not do anything special, and the whole array will be redone when any element is changed, as you see:

In other words, this should do what you want:

  return Cards.find({ deck_id: deck['_id'] }, {sort: {order: 1}}) 

This causes additional re-rendering:

  return Cards.find({ deck_id: deck['_id'] }, {sort: {order: 1}}).fetch();