I need to pick up an ember.js project to finish a few things. Unfortunately I don't have time to learn the whole framework and features but I was wondering how I create a partial.
I read the documentation below but don't really understand what goes where. I presume the second block of text goes in the .hbs template but where do I put the top block so that the second block can be rendered on any .hbs template?
<script type="text/x-handlebars" data-template-name='_author'>
Written by {{author.firstName}} {{author.lastName}}
</script>
<script type="text/x-handlebars" data-template-name='post'>
<h1>{{title}}</h1>
<div>{{body}}</div>
{{partial "author"}}
</script>
I worked it out, I didn't add the partial to:
EmberHandlebarsLoader.loadTemplates([])
Related
I have recently decided to do a major upgrade with my javascript libraries and have ran into a perplexing issue with appending Ember.Views. I have been researching this issue for several hours now and have tried many things but nothing has worked.
What I want to do is quite simple: Extend Ember.View, manually create a new instance of this extended view and then append it to a div. In a much earlier version (ember.js 1.5) this was extremely straightforward. Now (ember.js 1.9) attempting the same thing results in an error.
Container was not found when looking up a views template. This is most
likely due to manually instantiating an Ember.View. See:
http://git.io/EKPpnA
Here is a very simple example that demonstrates this: http://jsfiddle.net/81dhm3ta/
html
<body>
<script data-template-name="main" type="text/x-handlebars">
Main
</script>
<div id="main" style="text-align: center;"></div>
</body>
javascript
$(document).ready(function () {
App = Ember.Application.create();
App.MainView = Ember.View.extend({
templateName: 'main',
});
App.view = App.MainView.create();
App.view.appendTo("#main");
});
Can someone show me the simplest way to do this properly?
App.view is neither a D0M element or jQuery object that you can simply append to a div. It is an Ember object of type View.
In the link given by the error, you are clearly told that you can't create views like you did in your snippet. Dynamic views must be instantiated within a parent view or directly through the container (not recommended).
Your life will be much easier if you add views within a template by just using the view helper:
<script type="text/x-handlebars" data-template-name="index">
{{view 'main'}}
</script>
I'm running into a problem. I need App.rootElement = "body", because views and components will be used all over the place. I do not want to put the entire page in a handlebars template, due to SEO and other concerns. The main application template will exist somewhere in the center of the page:
<h1>Header markup</h1>
<script type="text/x-handlebars">
<h2>Application Template</h2>
{{outlet}}
</script>
<h1>Footer markup</g1>
However, when the page is rendered, this template is appended to the end of the body, instead of staying where the template script has been placed. (see jsbin exmaple) Is there any way to tell Ember to render the application template where it is in the markup?
One hacky solution I've found is to manually move the containing element in didInsertElement, but that seems a little heavy handed and not something that would be considered a best practice. (see jsbin example)
The script tag doesn't have anything to do with placement, if you want it to live somewhere create a div tag, id it, and change the rootElement to that div tag.
<script type="text/x-handlebars">
<h2>Application Template</h2>
{{outlet}}
</script>
...
<h1>Header markup</h1>
<div id='foo'></div>
<h1>Footer markup</h1>
App.rootElement = '#foo';
One of my child template is rendering in all routes/links when I click on the browser back/forward button. My route is defined as :
this.resource('analytics', {path: '/analytics'}, function(){
this.resource('analyticsRuns', {path: ':exerciseRunId/analyticsRuns'},function(){
this.resource('analyticsRun',{path: ':runId'});
});
});
and my templates are as follows :
<script type="text/x-handlebars" data-template-name="analytics">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analytics/index">
some content in analytics index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns/index">
some content in analytics runs index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRun">
some content in analytics run index
</script>
My templates are more complex than these but I wanted to give you a gist of what issue I am facing. So when I go from analytics to analyticsRuns and to browser back , then there are no issues, but when I go from analytics -> analyticsRuns -> analyticsRun and then go back to analytics using browser back button, the analyticsRuns template shows up after the analytics template is rendered. Now if I do forward, the analyticsRuns template seems to be appended in all the other routes. I am not sure if I am defining my handlebars wrong which is causing this issue, or maybe the problem lies somewhere else. But if you have any suggestion on how to avoid this issue then I would appreciate it a lot.
In my app setup, "analytics" is not actually a parent resource. Analytics just provides a filter value to "analyticsRuns" by which the master/parent data is loaded.
Thanks,
Dee
I don't know if this will be help to others, but in my case the problem was due to bad HTML markup(I was missing a closing div in one of the templates).
I'm trying to render a view in a template multiple times with different data each time, specifically like this:
<script type="text/x-handlebars" data-template-name="foobar">
{{render "_people" peopleArray}}
<!-- ... -->
{{render "_people" anotherPeopleArray}}
</script>
<script type="text/x-handlebars" data-template-name="_people">
{{#each person in controller}}
{{person.name}}
{{/each}}
</script>
I get the JS error: "assertion failed: This view is already rendered".
If I change the {{render "_people"}} to {{partial "people"}} then it will render multiple times, but I do not know how to pass different data into there.
To clarify, I to be able to create a partial/view, which I can pass data to, and can call multiple times. I'm sure this is simple and I'm just missing something.
Any help would be appreciated. Thank you.
You can use {{render}} only once. If you need to do it multiple times, use {{control}} instead, such as:
{{control "people" peopleArray}}
This will create a people template with PeopleView and PeopleController with it's content set to peopleArray
I must be missing something simple because I'm not finding the answer to my question anywhere. I've done due RTFM diligence, and am now resorting to asking my question here.
In short, I want to put a simple <a> tag in an Ember template, but the extra Ember mark up to make the object dynamic is breaking the URL itself.
My template looks like this:
<script type="text/x-handlebars" data-template-name="event-nav">
{{ obj.display_name }}
</script>
This, of course, results in something like this sitting in the DOM itself:
<a class="event-name logo" href="/<script id='metamorph-0-start' type='text/x-placeholder'></script><script id='metamorph-0-end' type='text/x-placeholder'></script>"><script id="metamorph-1-start" type="text/x-placeholder"></script>Object Name<script id="metamorph-1-end" type="text/x-placeholder"></script></a>
So in short, how do I make it do?
Much thanks.
You would use the 'bindAttr'-helper for this kind of use case:
<script type="text/x-handlebars" data-template-name="event-nav">
<a {{bindAttr href="obj.url" alt="obj.displayName"}}>{{obj.displayName}}</a>
</script>