Search code examples
javascriptmeteormeteor-blazespacebars

How to pull the data context from a view in Meteor using Blaze.getData()

I have a select input in one of my Meteor templates which has three pieces of data associated with each select option. I am trying to send all three pieces of data (as an object) to a new template that is rendered via the Blaze API on the 'change' event triggered after the user's selection. I am under the impression I can use the Blaze.getData method to do this, but it doesn't seem to be working for me. I was wondering if anyone has any experience using this method and might be able to help me troubleshoot.

I have a MeteorPad set up with an example of what I am trying to do here: http://meteorpad.com/pad/69XGm5nWPutg8an7T/Select%20Item

Also, here is the relevant 'change' event code:

Template.selectItem.events({
  'change .select_item': function(event) {
    event.preventDefault();

    var view = Blaze.getView(event.target);
    console.log(view); // me debugging
    var item = Blaze.getData(view);
    console.log(item); // me debugging
    Blaze.renderWithData(Template.selectedResults, item, document.getElementById('results'));
  }
});
Solution

  • The template in question, selectItem, has no data context, which is why this isn't working. Blaze is rendering {{#each items}} by looking up the appropriate helper function, but this isn't part of the data context of the template, so you can't retrieve it from the event handler.

    The easiest way to resolve this is by setting the data context of the selectItem template when it's called from the surrounding body template, like this:

    Template.body.helpers({
  items: function() {
    return Items.find(); //or Items, or whatever
  }
});

    and

    <body>
  <h1>Select an item</h1>
    {{> selectItem items=items}}
  <div id="results"></div>
</body>

    That way, the data context you retrieve in the event handler will contain items, although what you then do with it is up to you.

    If you wanted to continue doing things the way you are, the sensible thing to do would just be to pick up the items array directly as it's in the JS scope of your event handler. If you really wanted to do things via the helper function, you could try:

    Template.selectItem.__helpers[' items'].apply(Template.instance())

    However, this would be using private methods and really isn't to be recommended. Plus, it would be rerunning the helper anyway, and not really returning the results of the same run, which appears to be what you're after.