Load one template into a another one in Ember.js - javascript

Within one of my route's renderTemplate method, I've tried to render a different template by using this.render:
App.IndexRoute = Ember.Route.extend({
renderTemplate: function() {
this.render( 'dashboard', {
into: 'admin'
});
}
});
But the application within the browser is empty and the console shows the following:
Assertion Failed: You attempted to render into 'admin' but it was not
found
After this error message, I thought that the "admin" template might simply not be existent, but it it's there. Both the "dashboard" and the "admin" template are loaded. And the weirdest thing: I'm able to use this.render( 'dashboard' ) and this.render( 'admin' ) and both of them work fine.
What am I doing wrong? I've even added an {{outlet}} tag to the "admin" template.

If you want to render into admin then you have to use named outled inside your template (associated with route file you write renderTemplate). So, inside your template use:
{{outlet 'admin'}}
edit
I'm not really sure what to do right now. Just to clarify: "admin" is
a hbs template which contains a {{outlet}}. And into this outlet tag,
I want to load 'dashboard.hbs'. And after that, I want to output the
whole thing.So in which file do I need
I'm assuming you want to render these 2 templates from another unassociated route. In that case you could add {{partial 'dashboard'}} to admin.hbs and use just this.render('admin') in your IndexRoute.
edit 2
Inside your IndexController specify partialName: 'dashboard' and change it dynamically in your code and replace {{partial 'dashboard'}} with {{partial partialName}}. It should work dynamically and you can swap out dashboard for another templates.

Related

Get current route name on handlebar template in Ember.js 2

I needed to know the current route name so I can show or hide a global component that is created on my application.hbs.
This component should be hidden in just one route template, so this looks like the easier solution to me. Getting the current route name and if its equal "posts" it will not show the header-bar component.
Something like this:
{{#if currentRoute != 'login'}}
{{header-bar}}
{{/if}}
{{outlet}}
Any idea on could I achieve this or something similar that solves my problem?
applicatiion controller has a property names currentRouteName. You can use it.
If you want to use in another template you need to define that in controller.
test.js (controller)
init(){
this._super(...arguments);
let appCtrl = Ember.getOwner(this).lookup('controller:application');
this.set('appCtrl', appCtrl);
}
test.hbs
{{appCtrl.currentRouteName}}
Same answer as Ebrahim Pasbani.
This syntax is still usable in latest Ember version:
App.__container__.lookup('controller:application').currentRouteName;

Not extending the application template emberjs

IS there any way for me not to extend the application template in Emberjs? As in I have one route that the url needs to be /questions for SEO purposes but it has a completely different design than all the other pages. So I don't want it to inherit the application template. Is this possible?
You have two options I can think of. The first is that proposed in a comment: create separate top-level routes for questions and everything else:
// templates/application.js
{{outlet}}
// templates/questions.js
{{! whatever you want for the questions template }}
// templates/base.js
{{! base template stuff, headers, nav bars, content, etc. }}
// router.js
Router.map({
this.route('questions');
this.resource('base', function() {
this.route('base1');
....
});
});
The comment that this will result in routes of the form /base/base1 is not correct. By using this.resource, the routes will be of the form /base1.
Using outlets
There is another approach that may or not meet your needs. It involves putting a custom outlet in the application template, that may be filled in by subroutes. Then define a superclass for "regular routes" which define a renderTemplate which renders the header matter into that outlet.
// templates/application.js
{{outlet name='header'}}
{{outlet name='main'}}
// mixins/normal-route.js
renderTemplate() {
this.render('header', {
outlet: 'header'
});
}
// router.js
Router.map({
this.route('questions');
this.route('base1');
});
// pods/base1/route.js
export default NormalRoute.extend({...
This has the benefit of allowing the application template to be more "readable" and semantic, in that it explicitly shows that it is composed of a (possible) header portion, filled in some other components, and a "main" portion.

Ember-CLI Route model data not affecting template

I have an ember route webtest contained within the file routes/webtest.js:
export default Ember.Route.extend({
model: function() {
return {
title: "Does not appear"
};
}
});
I have the matching template contained within templates/webtest.hbs
<div class="container">
<h2>Title: {{title}}</h2>
</div>
when I navigate to the page /webtest in my web browser with ember serve
the resulting page has the title: text, but not the text does not appear
I have been to multiple ember pages, and I have the same code working here:
http://jsbin.com/neheru/6/edit?html,js,output
The goal is to be able to have a variable accessible from within the template webtest that can be accessed by a route.
FYI I'm trying to get it to the template so I can pass variables to a component
The variable should be {{model.title}}
You can log out variables from your template with
{{log title}}
{{log controller.title}}
{{log model.title}}
This might help you to debug faster.
You should then be able to pass data in to our component with something like:
{{my-component title=model.title}}

Change / unregister Handlebars helper (Meteor)

Once I register a helper function for Handlebars using Handlebars.registerHelper(), is it possible for me to change and/or remove the helper? Can I just use registerHelper() again to overwrite the current helper, or is there such a thing as Handlebars.unregisterHelper()? Or should I use a different approach if I need a helper to change during an application?
The use case for me is with the Iron Router plugin for Meteor. I am using a layoutTemplate as the general structure of my page. I wanted to use a helper in the layout template right before I yield the main content of the page body (via a <template>, per se) so that each individual template can define its own page title but not have to specify the location in the page every time. For example, my layout template could look like this:
{{pageTitle}}
{{yield}}
And then in the .js file for the rendered template, I would use the following to fill in the {{pageTitle}} placeholder:
Handlebars.registerHelper("pageTitle", function() {
return "My Page Title";
};
Perhaps there is an alternative way to solve this problem.
What you can do is something like this
Handlebars.registerHelper("pageTitle", function() {
return Session.get('pt');
};
function changePageTitle(str){
Session.set('pt', str);
}
Meteor, being reactive, should update the page when a session variable changes. When you switch to another page, simply run changePageTitle.

Verbose Logging in Ember

I'm trying to wrap my head around Ember at the moment, but all the magic is making this difficult.
I've set LOG_TRANSITIONS: true and Ember.LOG_BINDINGS = true; which gives me some minimal logging to the console, but I really need more than that.
I'm particularly struggling with seeing what's going on when Ember is automagically creating Controllers, Views and Templates.
Is there a way to log this aspect of the framework - to see where Ember is looking for Templates/Views/Controllers and when it is creating one on its own volition.
For example, I have the following routes set up:
App.Router.map(function() {
this.route("example_items", {path: "/"});
});
with:
App.ExampleItemsRoute = Ember.Route.extend({
model: function() {
return App.ExampleItem.find();
}
});
Ember renders my ApplicationController and its application.handlebars template:
<header class="page-header">
<h1>Application Template</h1>
</header>
{{outlet}}
But fails to render my example_items.handlebars template. I get no exception or warning, and if I check the DOM, I can see ember has created a generic view in its place.
The bindings logging shows me that Ember has transitioned to example_items, but it seems it hasn't used either my ExampleItemsController, ExampleItemsView or template.
How can I debug a situation like this if I receive no errors or messages?
Edit:
App.ExampleItems View:
App.ExampleItemsView = Ember.CollectionView.extend({
templateName: 'example_items'
});
And App.ExampleItemsController:
App.ExampleItemsController = Ember.ArrayController.extend({
});
I'm particularly struggling with seeing what's going on when Ember is automagically creating Controllers, Views and Templates.
Is there a way to log this aspect of the framework - to see where Ember is looking for Templates/Views/Controllers and when it is creating one on its own volition.
Yes. With the latest ember you can now LOG_ACTIVE_GENERATION to see console.log output whenever ember generates something for you.
Another new setting that might be helpful is LOG_VIEW_LOOKUPS
Here's your problem: CollectionView won't use your template. It takes an array as its content property (usually set up as a binding to the controller) and creates childViews manually. Without a content set it'll appear as a blank view.
If you add classNames: ['my-view'] to your view definition, you should see that the view it's instantiating and inserting is actually your view class, just empty. Add contentBinding: 'controller' and it should render itemViews for each item in the array, as well.

Categories