Handlebars outlet contains view data, but template and partial don't

Question

How can I make a template or a partial contain view data? I'm using Ember, handlebars, and requireJS. Currently, I find that only outlets contain view data. I'm trying to display a property of a model in a template. Specifically, I'm trying to display the numberFive property of the GraphData model in the graphHolderTemplate. Using at outlet is not ideal because I want to display templates from different views on the same page, regardless of the page's URL.

ApplicationView:

define(['ember', 'text!templates/applicationTemplate.html'],
       function(Em, applicationTemplate) {
  var ApplicationView = Em.View.extend({

    // warning: template doesn't work here, even though defaultTemplate does.
    defaultTemplate: Em.Handlebars.compile(applicationTemplate),
  });
  return ApplicationView;
});

applicationTemplate:

<h1>{{#linkTo 'graph'}}Graph{{/linkTo}}</h1>
<h2>{{#linkTo 'graphHolder'}}Graph Holder{{/linkTo}}</h2>
<h4>outlet</h4>
{{outlet}}
<h4>template graphHolder</h4>
{{template graphHolder}}
<h4>partial graphHolder</h4>
{{partial 'graphHolder'}}

graphholderTemplate:

<h3>This is the graphHolder</h3>
<p>view.graphData.numberFive is: {{view.graphData.numberFive}}</p>

GraphHolderView:

define([ 'text!templates/graphHolderTemplate.html',
         'controllers/GraphController',
         'models/GraphData',
         'ember',
        ], function(graphHolderTemplate, GraphController, GraphData, Em) {
  // This is all that sets the template. hmmm
  Em.TEMPLATES['graphHolder'] = Em.Handlebars.compile(graphHolderTemplate);
  var graphData = GraphData.create();
  console.log("graphData.numberFive is ": graphData.numberFive);

  var GraphHolderView = Em.View.extend({
    controller: GraphController,
    classNames: ['hero-unit'],
    graphData: GraphData.create(),
  });
  return GraphHolderView;
});

site

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-04-22T17:05:11

Pretty sure this is because of a typo:

var garphData = GraphData.create(); should be var graphData = GraphData.create();

EDIT: Ok it wasn't because of the typo. Next guess is that the view is not what you are expecting - i think it will be referencing ApplicationView. To be sure, try adding the following to the template:

<h3>This is the graphHolder</h3>
<p>view.graphData.numberFive is: {{view.graphData.numberFive}}</p>
<p>view is: {{view}}</p>
 {{log view}}

This should print view.toString() to the page and console. If you want to inspect the element further, try adding {{debugger}} to the template, then use js console to see what is going on.

Anyway, when you use the {{outlet}} helper, ember-router will fill in the appropriate template depending on your current route and context. It wraps the template in a matching View class if one is found.

Unlike {{outlet}} and {{render}}, both the {{partial}} and the {{template}} handlebars helper render template directly using the current context. That means they don't attempt to wrap the template in a matching view class.

What you probably want to use here is the {{render}} helper. It will render the named template in the current context using the singleton instance of the same-named controller. If a view class with the same name exists, it uses the view class.

Handlebars outlet contains view data, but template and partial don't

1 Answers