CODEWITHSUNDEEP
ember.jsrouteshandlebars.jsrouter
meetmahpuppy
meetmahpuppy

Reputation: 428

How to display precompiled templates to a specific view

Can anyone help me how to display the generated pre-compiled handlebars to a specific view?

var aboutData= [{...}, ...];

App.Router.map(function() {
   this.resource('about);
});


// When navigating to url: www.../#/about
// This whole thing generates a view appended to the body
// I want the generated handlebars to be appended somewhere specific
App.aboutDataRoute = Ember.Route.extend({
  model: function() {
     return aboutData;
  }
});

Upvotes: 1

Views: 87

Answers (1)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

A couple of things:

Naming Conventions: Your route should be called About since you created an about resource in your Router. The route name would match to an structure like the following: 

App.Router.map(function() {
    this.resource('about', function() {
        this.route('data');
    });
});

In this case, you'd have a few implied routes and the ones you would create declaratively (more about it here, here and here, although the 2nd link is old). But basically, with this router definition, the name AboutDataRoute would work because, as per convention, this name joins the names of the parent (About) and child (Data) routes, plust the suffix Route. With the route you have defined, once you go to ~/#/about, Ember will ignore the route class you created and generate a default implementation on the fly for that route (you can see that with the inspector), because that doesn't match with the conventions.

Case Sensitivity: Generally, you should use PascalCase for naming most things, but your is camelCase. Try read more about naming conventions.

As for your question, you can render the app in a different element, no problem. It's just that the body is set as the default in Application#rootElement. You can change it like this: 

App = Em.Application.create({
    rootElement: '#selector'
});

where #selector in this case could be any element in DOM.

Just keep in mind that the application view is the one that should be rendered in "this" or "that" DOM element. All other views are some type of child (directly or indirectly) of application view, so they will render in an {{outlet}}, so you should do that in the Application concrete class.

Upvotes: 1

Related Questions