Meteor + Iron-Router - how do I update my template's data context in response to events the user generates in my template?

Question

So I have a route that sets my template

Router.route('audit', {
    path: '/audit/:audit_id/',
    template: 'audit',
    data: function() {
        if (this.ready()) {
            audit_obj = Audits.findOne({_id: this.params.audit_id});
            lineitems = LineItems.find(JSON.parse(audit.query));
            return {
                audit_obj: audit_obj,
                lineitems: lineitems
            }
        }
    },
    waitOn: function () {
        return [
            Meteor.subscribe('lineitems', this.params.audit_id),
            Meteor.subscribe('audits')
        ]
    }
}

Now, when my user takes certain actions on the page rendered by the audit template, I would like to update the audit object and also update the data context that the page is running with. Is this possible?

Something like:

Template.audit.events({
    'click .something-button': function() {
        // update the data context for the current audit template.
        current_context.audit_obj.something = 'new something';
    }
});

You may find [this post](https://dweldon.silvrback.com/scoped-reactivity) helpful. — David Weldon, Nov 24 '14 at 20:48

score 0 · Answer 1 · edited Nov 24 '14 at 21:40

Yes:

Router.route('audit', {
    path: '/audit/:audit_id/',
    template: 'audit',
    onRun: function() {
        Session.set('audit', Audits.findOne(this.params.audit_id));
        Session.set('lineitems', LineItems.find(JSON.parse(audit.query)).fetch());
    }
    data: function() {
        if (this.ready()) {
            return {
                audit_obj: Session.get('audit'),
                lineitems: Session.get('lineitems')
            }
        }
    },
    waitOn: function () {
        return [
            Meteor.subscribe('lineitems', this.params.audit_id),
            Meteor.subscribe('audits')
        ]
    }
}

and

Template.audit.events({
    'click .something-button': function() {
        // update the data context for the current audit template.
        Session.set('audit', {..});
    }
});

But you'll need to decide how to handle changes that come from the server, and may interfere with changes on the front end. So a better approach might be to leave the first part of the code (router) as is:

Router.route('audit', {
    path: '/audit/:audit_id/',
    template: 'audit',
    data: function() {
        if (this.ready()) {
            return {
               audit_obj: Audits.findOne(this.params.audit_id),
               lineitems: LineItems.find(JSON.parse(audit.query))
            }
        }
    },
    waitOn: function () {
        return [
            Meteor.subscribe('lineitems', this.params.audit_id),
            Meteor.subscribe('audits')
        ]
    }
}

and just change the front end to update the collection:

Template.audit.events({
    'click .something-button': function() {
        // update the data context for the current audit template.
        Audits.update( this.data.audit_obj._id, {..} );
    }
});

Of course, that will update the data on the server, too.

Meteor + Iron-Router - how do I update my template's data context in response to events the user generates in my template?

1 Answers1