Creating reactivity that is focused on one part of a minimongo document


#1

Hello,
Here is the question I posted on Stack Overflow about this:

I’m basically trying to find a way to execute reactive functions only when part of a document inside of a minimongo collection has changed. I thought I had this done by narrowing my template’s autorun reactive variable down to the templates CurrentData. So if the data context of my template is strictly related to one array in my collection’s document, I should in theory only have my function execute when that array is modified. Unfortunately, no matter where I make changes in the collection all of the child template’s autoruns get executed.

Here is some code and I’d appreciate any ideas on the topic!

parent.html

{{#each items}}
  {{> child}}
{{/each}}

child.html

<div>{{title}}</div>
<p>{{description}}</p>

Minimongo Collection

LocalProject.findOne() output:
    "items": [
      {
        "title": hi,
        "description": "test"
      },
      {
        "title": hi 2,
        "description": "test 2"
      },
    ],
    "otherstuff:{//etc}

child.js

Template.child.onRendered(function(){
    this.autorun(function() {
        var data = Template.currentData();
        doSomething(data.title,data.description)
    });
});

addnewitem.js

LocalProject.update(currentEditingProjectID,{ $push: { 'items': newItem }},function(error,result){
    if(error){console.log(error)}
});

#2

It’s generally a bad idea to trigger actions based on reactive computations. You should stick to using reactivity for displaying information.

However, as an academic exercise - there’s a way of providing reactive isolation to the result of any mashup of reactive data - http://stackoverflow.com/a/33048146/494182


#3

Hi nathan_muir and thank you for the response. I need to use reactive computations to update a javascript plugin basically, Greensock Animation. Really, in effect, this is a reactive update to the UI traversed through GSAP. I keep an animation timeline up to do date through reactivity and as a result I don’t have to rebuild the entire animation each time a user makes a change to one of its elements.

Do you think there might be a better way around this? Anyway, I’ll check out the package you recommend. I was hoping to use something that was part of Meteor’s core functionality but I’m open to packages that are mostly futureproof. Thanks again for this advice.

Dan


#4

Hi Dan,

Without knowing the specifics of what you’re trying to animate - I’d just be back-seat driving.

However, you could take a look at how plugins like momentum, and how the enable animation. (HINT: they hook into Blaze’s per-element _uihooks property)