1

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;
  }
});
meetmahpuppy
  • 418
  • 1
  • 4
  • 17

1 Answers1

1

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.

Community
  • 1
  • 1
MilkyWayJoe
  • 9,082
  • 2
  • 38
  • 53
  • I see... I just recently practicing ember. This clears most of my question, I think all. Thanks. Anyway, is it possible also to specify where to insert the DOM when using Ember.View? ex. App.AboutView = Ember.View.extend({ template: Ember.TEMPLATE.about // this is already a precompiled handlebars }); – meetmahpuppy Oct 02 '14 at 20:54
  • If you follow conventions you don't have to specify the view's template, as it will find a matching name and use that template automatically. Btw, your templates are always compiled, the thing is that you can *serve* them pre-compiled or in into `script` tags as part of your html document, and even if that's the case, they will still be compiled during initialization of your app. So if you still need to manually specify templates for your views, follow [docs](http://emberjs.com/guides/views/inserting-views-in-templates/) and use something like `templateName: 'some-other-name'` – MilkyWayJoe Oct 02 '14 at 23:26