I am working on constructing simple Ember js template links and since I am somewhat new to Ember and I come from PHP background I tried building the idea from PHP experience on including ember templates in another template such as this:
<script type="text/x-handlebars" id="top-nav">HTML HEADER</script>
<script type="text/x-handlebars" id="index">{{render 'top-nav'}} HTML body</script>
The idea behind it is that I want 'top-nav' template to be included in every ember template. I know {{outlet}} works in the similar matter, but it won't provide the flexibility of having few lines of code.
My question: Is there a more plausible way to insert templates into templates?
Thank you.
The best way to insert a template inside of another template is simply to use a view.
{{view 'top-nav'}}
define your template like:
<script type="text/x-handlebars" data-template-name="top-nav">
... template markup
</script>
and then define your view in js
Ember.View.extend({
templateName: 'top-nav',
});
and that is it. you can find more documentation on it here: http://guides.emberjs.com/v1.10.0/views/inserting-views-in-templates/
EDIT
as #GJK pointed out views have been deprecated as of Ember 1.13 if you are using Ember 1.13 or later I would recommend using a component instead.
{{top-nav}}
components work in a similar way that a view used to work. you can find more information about them here. ultimately it depends on what version of Ember you are using.
http://guides.emberjs.com/v2.0.0/components/
Is there a more plausible way to insert templates into templates?
This is exactly what partials are for. You can read up more on partial templates here. The gist is that you want to create your re-usable part using a filename that starts with _. For example:
{{! _header.hbs }}
<header>
<nav>...</nav>
</header>
Then, you can use {{partial 'header'}} to drop that code right into another template (with the same context).
That being said, having a header on every page is usually a scenario where the application template is most useful. You can define your application template like so:
{{! application.hbs }}
<header>
<nav>...</nav>
</header>
{{outlet}}
This will ensure that all of your pages have the header you desire because every top-level template will be rendered inside of the outlet.
If you're having trouble deciding what to use, use partials until you run into issues. At that point, you'll probably be more equipped to deal with the application template and complex template structures.
Related
I am developing a bigcommerce stencil theme. I want to use basic handlebars functionality like
markup
<div id="mobile"></div>
<script id="mobile_category_template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{var}}</h1>
<div class="body">
<p>body</p>
</div>
</div>
</script>
<script src="{{cdn 'https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js'}}"></script>
<script src="{{cdn '/assets/js/category.js'}}"></script>
javascript
var hitTemplate = Handlebars.compile($("#mobile_category_template").html());
$(".collection-page").html(hitTemplate({
var: "var works"
}));
This would normally work. but bigcommerce parses handlebars serverside. By the time my frontend handlebars parse, the {{var}} has already been compiled. How can i get the above to work separately from serverside handlebars? OR how do i make and/or extend the current handlebars logic. (basically how can define my own template variables/drops)
Very specifically. I want to decide rather to load {{> components/mobile}} or {{> components/desktop}} based on the viewport or browser in use (easily done with javascript).
This is the problem i want to solve: BigCommerce Stencil — load component parts based on custom javascript logic
I have lots of ng-templates like this:
<script type="text/ng-template" id="item.html">
// content
</script>
Now, all of them are in one base.html file and thus the template code has become messy.
I want to put each ng-template in its own html file.
Logical place would be templates folder. But when I tried to reference templates like templates/ng-templates/item.html, I got 404 Not Found.
How can I fix it? Or, what is the best practice of accomplishing this?
Actually you should place your angular templates to the static directory.
Because Django doesn't serve templates, it uses those for rendering.
So, for example you could place your template in /static/templates/item.html, and in angular you reference this template like /{{ STATIC_URL }}/templates/item.html.
Is it possible to have multiple controllers on one route / page. I want to show 2 features of my application on one page. But they are not directly related so each would need it's own controller, model and (partial) view.
But I can't seem to figure out how I could do this.
It seems that I must use the {{render}} option here.
Is it possible to have a subdirectory structure here?
When I have {{render "dashboard.users"}} for the template it does look in template/dashboard/users.hbs but for the controller I can't seem to find where it looks and what the naming conventions should be.
E.g. should it be
App.DashboardUsersController = ... ?
edit:
Looks like it should be, but I shouldn't place it in a subfolder of controllers but name it dashboard_users_controller.js
You get this effect by rendering templates into multiple outlets of their parent template: Guide and API Docs
Here is a running JSBin demonstrating it
Is there a way to extend templates like in Django? My base template has a header that only needs to be a few pages. I'd like to change that for the the other templates.
Something similar to
{% extends "base.html" %}
...
{% endblock %}
I'm using Ember.js.
As far as i know this notation does not exist, also i haven't seen the concept of inheritance on handlebars templates layer.
However, i can think of two ways to achieve what you want,
1. using the {{partial}} helper http://emberjs.com/guides/templates/rendering-with-helpers/
The {{partial}} helper can render the header part and it can be included only on those templates of the pages that require the header.
2. using layouts http://emberjs.com/guides/views/adding-layouts-to-views/
Have two layouts one with the header and another without it, then specify on the pages/views that need the header the corresponding layout using the layoutName property.
I was looking for the same as I come from the same Django background. Here I've found exactly what you are looking for. It uses another module from npm called Handlebar-layouts. which is really useful.
I have a backbone application, which is served by a symfony2 server.
I have many backbone views and each has several templates that are rendered at different times using underscore's templating engine.
I am trying to figure out how to serve the underscore templates to the client with maximum efficiency.
Up until now I've written all of the templates in twig, and then rendered them as inline script tags to the response HTML during the initial request. This resulted in a long response time from the server during the first time a user enters my application.
output example:
<html>
<head>
...
</head>
<body>
<script type="text/template" id="template1">
<div class="example">
<%= someparam %>
</div>
</script>
<script type="text/template" id="template2">
<div class="anotherExample">
<%= otherparam %>
</div>
</script>
...
...
...
</body>
</html>
Alternatives
Now I'm looking for a better way to load these templates. perhaps by getting them in a second request in a single file, like an external JS file. But with anything I've tried, I have found it difficult to either access individual templates (like referencing them by id) or to keep them all in an efficient structure (in a single file, and without too much string manipulation or too many http requests).
TL;DR
How would one load many underscore templates?
You could consider the JST approach, which is to concatenate the templates into a single javascript file. The pattern is described in this Backbone Patterns tutorial.
I'm not familiar with Symfony/Twig, so I don't know if there is any tooling available. Based on your question I would guess it's easy to use your existing tools to render the templates into a javascript file instead of the HTML document.
I think better way for you - it's precompile template, try to use jsttojs, it will help you get single file with all you templates.
for example, from command line
jsttojs templates compiled/templates/index.js --ext mustache --watch
or use solution for grunt, grunt-jsttojs