Blaze.getData() Question

help
1

I’m currently rendering bootstrap modals on my webpage using MeteorJS’s “renderWithData” method to load each template when it’s needed.

I’m running into an issue where my helper methods which access the data in the modal using “Blaze.getData()” will occasionally return undefined and I’m unsure how to fix that.

The only way I’ve been able to replicate the issue is by constantly creating/destroying the modals and there doesn’t seem to be anything that specifically causes the issue.

Here are the steps I’ve been taking:

  1. I instantiate the modal with the proper data

    Template.Courses.events({
    ‘click .share-course’: function (e,t) {
    var courseID = $(e.target).data(‘courseid’);

     Template.instance().activeCourse.set(
     createModalWithData(
         {
             currentInstance: Template.instance().activeCourse.get(),
             template: Template.Enrollment_Generator,
             dataToRender: {courseID: courseID}
         }
     ));

 $('#generateEnrollmentURL').modal('show');

    }
    });

Also, here is the code for “createModalWithData”:

// Create a modal with a specific data context
// If modal template already exists, destroy
// and re-create with the new data context.
// If a location to render isn't specified, renders
// content in the body .
// Parameters: [Object] data { currentInstance : Template || null,
//                             template        : Template,
//                             dataToRender    : Object,
//                  (optional) location        : Element
// Return: Blaze Template Instance
createModalWithData = function createModalWithData(data) {

    // Ensure data exists
    if (_.isUndefined(data) || _.isNull(data)) {
        throw "data cannot be null or undefined";
    }

    // If modal already exists, destroy it
    if (!_.isNull(data.currentInstance)) {
        Blaze.remove(data.currentInstance);
    }

    // If location is undefined, set to page body
    if (_.isUndefined(data.location)) {
        data.location = document.body;
    }

    // Render modal with dataToRender
    return Blaze.renderWithData(data.template,
        data.dataToRender,
        data.location
    );
};

  1. I attempt to retrieve the data using “Blaze.getData()” within my modal template

    Template.Enrollment_Generator.onCreated(function() {
    var courseID = Blaze.getData().courseID; // Occasionally undefined

     Meteor.subscribe('enrollment-codes',courseID);

    });

So far I’ve attempted to replace the “onCreated” method with “onRendered” but still had the same issue.

2

Don’t use Blaze.getData(), use Template.currentData().

Blaze.getData() is to get the data context of a DOM node or view.

3

ah I feel silly now. It turns out the issue was within the click event. I had a nested span element within my share-course button:

<small class="share-course" data-courseid="{{_id}}">
     Share
     <span class="glyphicon glyphicon-share"></span>
</small>

Anyways, thank you for pointing out that I should be using Template.currentData(). I’m assuming that Blaze.getData() was working as well because the method defaults to the data context of the view calling it?

Since Template.currentData() and Template.parentData() take care of retrieving the data contexts from the current view and any views enclosing it, are there any benefits or reasons for using Blaze.getData() instead?

4

Typically you would use Blaze.getData() to get the data context of a DOM node that is not in the template you’re in:

Blaze.getData($('#some-dom-node-far-off-in-another-template').get(0))

Try it out. Grab the data context in another template from another template.

1 Like