The app is deployed here: memoryapp.meteor.com
The source is available in a git repo here: https://github.com/SnappyCroissant/memoryapp
To reset the app run
Cards.update({}, {$set: {state: 'play'}}, {multi: true})
from the console.
I know it's bad to have client access to collections like this, the app is far from production ready I'm just finding my way through Meteor.
Currently whenever any update is run in Cards the entire DOM redraws except those elements I've called persistency on. To my knowledge though elements should only redraw when updated though, or have I misunderstood the way reactivity works?
The only real dynamic change happening within the script is that the 'state' property of the objects in Cards is being changed. And yet it redraws every property and every DOM Element unless explicitly declared not to.
Is it because they are all passed to the template in one array? If so what is the best alternate method to go about this.
The structure is a bit hodgepodge because it's been a learning experience, all the important bits for the issue (as far as I'm aware) live in client/memory.js and server/model.js
To get the reactive implementation of #each, you need to pass a LocalCollection.Cursor object directly to #each. An array won't do anything special and the whole array will be redone when any element is changed, which is what you're seeing:
In other words, this should do what you want:
return Cards.find({ deck_id: deck['_id'] }, {sort: {order: 1}})
This causes extra re-rendering:
return Cards.find({ deck_id: deck['_id'] }, {sort: {order: 1}}).fetch();