Ember JS renders default template after adding new route - javascript

I'm trying to make some proof of concepts, and learning the ember js framework concepts. I came across an issue, that is bugging me for hours... here's the thing:
I created a simple ember-cli app using the windows command prompt. Everything works fine, the default route get's hit and the application.hbs is rendered.
After that I added a blogposts.hbs to the templates, that has just static html:
<h1>Blog posts</h1>
<div>These are the blogposts:</div>
Also added a route to the /router.js
Router.map(function() {
this.route('blogposts',{path: '/blogposts'});
});
// -or-
Router.map(function() {
this.route('blogposts');
});
Tried both of the above. And added a linkto to the application.hbs that should link to the blogposts route.
<h2 id="title">Welcome to Ember</h2>
{{#link-to 'blogposts'}}Blogpost linkto{{/link-to}}
THE PROBLEM: this route seems like never gets hit. I tried to navigate to localhost:4200/blogposts, tried the link that's generated, I also tried the hash: #/blogposts, but none of these render me the blogposts template. If I understand it correctly ember should generate a default controller for the blogposts if I don't specify one, and also a model shouldn't be required to render that template. I know this has to be some minor thing that I'm missing, but I can't seem to understand where am I wrong.
Every helps is much appreciated!
Thanks!
PS. I almost forgot, I am using the following:
Ember : 1.13.11
Ember Data : 1.13.15
jQuery : 1.11.3

OK, just 5 minutes after I posted the question I got the answer! I was missing the {{outlet}} from the application.hbs!
It was not clear for me that the application.hbs is like a layout of some sort, and it will allways be rendered. I thought that based on the routes the application.hbs will be replaced by the blogposts, but it's not like that.
With the default routes in place the application template will be rendered first and the additional templates will be rendered to placeholder (the {{outlet}}).

Related

Override ember component template with template from addon (in-repo)

I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.

Render dynamic templates in Ember.js

I am new to Ember, so this might be a stupid question, but bear with me. Is there a specific reason one can't render templates with a dynamic string? Specifically, I push various objects to a controller variable like this:
this.controllerFor('application').get('popups').pushObject({
resource: article,
template: 'article'
});
And then try to render them:
{{#each popup in model}}
{{ render popup.template popup.resource }}
{{/each}}
This doesn't work in Ember as-is, since it expects a string as the template. I just patched this in my ember source in the renderHelper function:
if(name.value) name = name.value();
This makes sure that if the name comes from a property, it gets converted to a string correctly. It works perfectly fine. What is the reason Ember doesn't support this out-of-the-box? Am I missing something?
A little background for the stuff above: I want to open lots of different resources in popups on the page, but I want to keep the popups separated from the rest of the current route so I can show them on their own page if needed without duplicating code. My idea was that I push all open popups to a global array, and they are rendered at the bottom of the page (A bit like we do it at the moment without ember). Maybe there is a better way to do this that I missed!
You want to
Create a popup template independent of route
Pass data to template and render it any where
Right ? If yes there is a very good concept of component in Ember.js
Component is a small module with is separate from application. It only depends upon the data passed into it.
It can be reused in different portion without ever effecting each other. They are especially good to run third party plugins like qtip etc.
here is good article about use case of component.

Iron Router dynamic routes don't re-render

I have a route that looks like this:
#.route 'dailyTotal',
path: '/report/:year/:month/:day'
template: 'dailyTotal'
layoutTemplate: 'report'
data: ()-> this.params
And in my controller something like this:
Template.dailyTotal.bevTable = ->
params = this
# a whole bunch more...
In the controller, I use those params to do some rather complicated stuff that isnt' relevant to my question because this doesn't re-render (or execute?) when you navigate from one dynamic route to another.
For example, if I navigate from "/report/2014/05/21" to "/report/2014/05/22" nothing happens. That route only executes if you come from a completely different route (say, "/report/totals" for example).
When I put a break point in the controller it never gets this, but I see the params change within the data function. My gut tells me I need to somehow force the controller action to run, but it isn't obvious from either the IronRouter or Meteor docs. Any suggestions?
I tried to reproduce your issue by creating simple meteor app with route you published above, but no luck, IronRouter properly handles this case.
Please compare your code with :
https://github.com/parhelium/meteo-so-ironrouter-dynamic-routes
IronRouter properly detects change of params in the same route, so going first to /report/2014/05/21 and then to /report/2014/05/21 re-renders template properly.
App structure was generated using em tool, it generated a lot of dirs and files, but only few are important in this situation:
both/router/routes.js
client/controllers/report.js
client/views/report/*
Update
When you pass this.params through data field in controller then usage in template for your route is:
{{year}}/{{month}}/{{day}}

Ember.js view not being autoupdated

I'm stuck in the 'Scrumptious' bookmark app created in a Tuts+ Course called 'Let's Learn Ember'. As the course is some months old, I'm trying to re-do the app using the most updated versions of Ember.js and Ember-Data.
Here's the repo: https://github.com/jantequera/scrumptious
NOTE: due to #claptimes request, I've added a jsbin of the project: http://jsbin.com/ukuDORUZ/2/edit?html,js,console
The thing is, that in the 'bookmarks' template, when I add a new bookmark, it is stored and the "create Bookmark" partial disappears, but the bookmarks table isn't updated, and it doesn't even reflect the changes in the newly created bookmark on real-time, which is the intended behaviour. In other words, I have to refresh the browser in order to see the new bookmark in the table, which is not the way an ember.js app should work.
As I am learning Ember, I might have missed or misunderstood something in the guides that explains this, so any help is welcome. Below I expose the code, if you wish to see it in context or even try it out, use the repo above. Thanks!
EDIT Anton below pointed out and advised the usage of components, which make the jsfiddle above work. However, when I use this solution in my local copy, it wouldn't work UNLESS I use the FixtureAdapter INSTEAD of the LSAdapter (local-storage). Any clue?
http://jsbin.com/ukuDORUZ/6
You use "render" helper:
{{render "table" controller.regular}}
model is not updated in "table" template when you create new bookmark and update controller.regular
you can use component (http://emberjs.com/guides/components/) and bind your model to component's parameter:
{{bookmarks-table elementsBinding="controller.regular"}}
http://jsbin.com/ukuDORUZ/6

Backbone routes: Before & after hooks?

I'm trying to add the equivalent of rails' "flash" functionality in my backbone app, part of which involves putting a showFlash() at the top of each route in my router, and a purgeFlash() at the bottom.
Needless to say, adding those two methods to every route works, but it isn't the most elegant approach. Still, I'm struggling to figure out how to add hooks to backbone routers.
In short, I'd like to run showFlash() before navigating to any new page, and purgeFlash() afterwards. ...Any thoughts?
This plugin should do the trick:
https://github.com/angelo0000/backbone_filters
(not sure though if it works with the latest backbone version)
update - according to this comment it works with 0.9.2

Categories