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.
Related
I am trying to include a search box provided in this local source: http://dnauck.github.io/angular-advanced-searchbox/
I went through all the steps, but I can't figure out how to properly complete this last step:
The angular-advanced-searchbox directive uses an external template stored in angular-advanced-searchbox.html. Host it in a place accessible to your page and set the template-url attribute. Note that the url param can be a scope variable as well as a hard-coded string.
Any help would be great. Thanks
It basically mean that you can create your own template (With your own style and structure) instead of the default. How?
This is the default template the module is using: https://github.com/dnauck/angular-advanced-searchbox/blob/master/src/angular-advanced-searchbox.html
You can use change this template structure (But you should keep the directives that the module need to run) and use it instead of the default template, by wrapping it with <script type="text/ng-template" id="myNewTemplateName.html"></script>:
<script type="text/ng-template" id="myNewTemplateName.html">
<!-- PUT HERE YOUR NEW TEMPLATE -->
</script>
And then you need to introduce your template to the module:
<nit-advanced-searchbox
ng-model="searchParams"
parameters="availableSearchParams"
template-url="myNewTemplateName.html" <!-- NOTE THE TEMPLATE DECLARATION -->
placeholder="Search...">
</nit-advanced-searchbox>
There are additional ways to include and reuse templates in your app - see $templateCache documentation to learn more. There is also this tutorial about templates.
If you look at the source file on the github page, you can see what he means. You can set the template url by the string 'angular-advanced-searchbox.html' which is a relative path to the html file in the same folder, or you can set it by the attribute templateUrl by referring to attr.templateUrl. This would be a string set when you call the directive in your html file as in <nit-advanced-searchbox template-url="templatUrlString'/>
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.
In my application we are templating handlebars from client side(we are not templating from server side).So till now we used maintaining all templated inside of the html file using script tag like in the following way.
<script id="selectdropdownTpl_mobile" type="text/x-handlebars-template">
<option value="{{optValue}}" label="{{name}}">{{name}}</option>
</script>
Whenever I want template, I am just compiling and appending compiled result to dom just like following way
var alertCompilation= Handlebars.compile(document.getElementById("selectdropdownTpl_mobile").innerHTML)
alertCompilation({"optValue":"test","name":"firstApp});
Working fine,but what we are thinking to separate all handlebar templates into another file.so it's easy to maintain html file.
Regarding this,I thinking to move all the templates into .js file inside of the file just creating global variable,it is object in the following way.
//fileName test.js
var templates={
"selectdropdownTpl_mobile":"template code"
}
whenever I want, I can access template code like in the following way.
var alertCompilation= Handlebars.compile(templates["selectdropdownTpl_mobile"]);
alertCompilation({"optValue":"test","name":"firstApp});
This way also working fine,What I want to know is this good way or not.If it is not good way How shell do this.
I heard about .hbs file, basically it contains pre-compiler template.It's usefull If I template from server side but in my case templating happening in client side itself.
can anyone suggest me,which way is better.
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
It would be useful to have a Coffeescript include function so it could load the external mustache templates when compiling in javascript and not clutter the coffee files.
Actually you can load .mustache files at runtime but you need to call them with an ajax request with some performance penalities involved.
I would like to precompile some static mustache templates and include them in generated javascript function that could be Stitched and compressed in a single file.
Is there a project or a script for that?
I think this solution for you, javascript template precompiller for mustache and othe template engines https://github.com/kupriyanenko/jsttojs
for example, use with command line
jsttojs templates compiled/templates/index.js --ext mustache --watch
or use solution for grunt, grunt-jsttojs
First of all you can use something like this:
<script type="text/x-mustache" id="tid...">
... mustache template ...
</script>
to include your templates in dedicated script blocks rather than as strings in code.
getElementByID() + innerHtml() will give you its source that you can use.
About the Mustache in general - you cannot compile it strictly speaking. Templates get interpreted each time you "instantiate" the template.
If you do need to compile them then consider use of my Kite engine:
http://code.google.com/p/kite/ or any other compileable templates:
http://jsperf.com/dom-vs-innerhtml-based-templating/99
Absolutely, this is something we do where I work. All the templates go in a single html file and get's inserted into the dom at build time. Each template is stored in a script tag of type unknown so the browser just ignores it. Then you can reference them using selectors.
<script type="unknown" id="id_of_template">
<ul>
{{#words}}
<li>{{.}}</li>
{{/words}}
</ul>
</script>
render = (template) ->
view =
words: [ 'hello', 'there' ]
template = $('#' + template).html()
html = Mustache.to_html template, view
John Resig has a good article on the technique http://ejohn.org/blog/javascript-micro-templating/
I'm looking at doing something similar. I haven't tried this yet, but it seems like you could use Node.js and Mu, the Mustache build for Node.js, to do this. Pseudo-JS code...
var compiledTemplate = Mu.compile("myTemplateFile.html")
fs.writeFile("myCompiledTemplate.js", compiledTemplate.toString());
Twitter's library Hogan.js does the job.
You can render a template string included directly in your source using Mustache.to_html(), if that helps.