I would like to abstract out pieces of html in an ember project.
For example... keep the <head> in a different file and "include" it in index.hbs or something. (think php <?php include('something'); ?>)
The naming conventions in ember CLI and handlebars are a little foreign so far - and I'm not finding what I thought would be pretty standard...
My guess would have been `{{#include 'head.hbs'}}' or something
There has got to be a convention for this... But I think I'm using the wrong search terms.
Thanks.
You can use either {{render 'your-template-file'}} or {{partial 'your-partial-file'}} to accomplish this.
Related
I just took over a web application from another developer, and I'm trying to clean it up. Currently there is only a single HTML file, and it is over 1,000 lines long. It contains at least a dozen Backbone templates, and I would really like to separate them into their own files. I'm not an expert in Backbone, and I've been searching the internet for a good while without finding much help. It seems that there should be a very simple, elegant, and even recommended way of doing this, but I have yet to discover it.
So, say we've got some code like this in index.html:
<script type="text/template" id="myTemplate1">
<p>Hello</p>
</script>
<script type="text/template" id="myTemplate2">
<p>World!</p>
</script>
How can I place them in separate files, such that Backbone will still be able to access them?
Edit:
Hi Anatoliy, thank you for your help. I've had some time to play around with this today, but I'm not sure where to put things. I inherited this code:
define(function (require, exports, module) {
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
Handlebars = require('handlebars'),
jqueryUI = require('jquery-ui');
var myView = Backbone.View.extend({
tagName: 'div',
className: 'myView',
template: Handlebars.compile($('#myView').html()),
So where would you recommend putting the code you suggested? I tried inserting it in the Handlebars.compile() function with no luck. Thank you for your help, I just can't seem to find much of anything on the internet in terms of examples or guides.
Use require-js. Specifically with require-handlebars plugin (or whichever templating engine you prefer)
https://github.com/SlexAxton/require-handlebars-plugin
That way you get to put your templates into separate files, then load them in by doing:
define(['hbs!your/template/file'], function(tpl){
var html = tpl({data: 'stuff'});
});
I used this approach mentioned by require-handlebars-plugin but when trying to precompile them to use in production. using require-handlebars-plugin wasn't straight forward I managed to do this but after I spent much time debugging this, , my advice is to precompile templates from the beginning because changing this before production wasn't hasslefree.
You can use approach like:
http://nuunoo.wordpress.com/2013/06/08/javascript-pre-compiled-templates-with-handlebars-js/
and use grunt task for automating this:
https://github.com/gruntjs/grunt-contrib-handlebars
I have a fairly big webapp with lot of templates. I am looking to save time by precompilation of these files.
Currently, I use a script wrapper so that I can load it dynamically and package them in html
<script id="all-domain-users-model-template" type="text/html">
<td></td>
<td>{{domain}}</td>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{is_account_owner}}</td>
<td>{{#if is_account_owner}}Delete{{/if}}</td>
</script>
There are many many such files. One file can have more than one definition..
I am looking for ideas for a script to read the name in id, parse html, compile and put it back using id.templates in a js file.
I have seen Using pre-compiled templates with Handlebars.js (jQuery Mobile environment) - the accepted answers mentions that the script tag was removed before copying.. But in reality, its almost impossible..
I use grunt-ember-templates to precommpile my ember handlebars templates.
For a good example of this grunt plugin in use check out this example todos application.
It gives a good example of using grunt for your build process, testing, etc, and includes template precompilation.
So I'm building an Ember.js application. I've got more than two routers now, so it's becoming a lot harder to justify putting all these templates in index.html as <script> handlebars.
I can't seem to figure out how to have handlebar templates outside of the html! The other thing is that I'd like to avoid more dependencies if possible. So no pipeline, grunt libraries, or similar.
So to clarify:
I already stuff templates in index.html via <script> tags, I don't like it.
I don't want to jump back 20 years and put HTML in strings inside my javascript.
AJAXing static views seems ridiculous.
Without adding anything to the stack I don't see how you could do it other then putting them in index.html or in code one way or the other.
With adding stuff to your stack you should probably read this: answer by Yehuda Katz himself.
You could compile your templates in code like so:
App.View = Em.View.create({
template: Em.Handlebars.compile('{{outlet}}');
});
or if you are extending the view:
App.View = Em.View.extend({
defaultTemplate: Em.Handlebars.compile('{{outlet}}');
});
or you could register them like so
App.register('template', 'ViewName', Ember.Handlebars.compile(template));
The best way I've found so far is to use a command line tool like Grunt. You set the paths where your templates are (so you can organize your handlebars files nicely), and grunt will automatically compile all the views into a single, minified JS file that you can include, whenever you create or modify a template.
Because your templates are already compiled you can ship your application with a much smaller version of handlebars.
You can see an example of a configured Grunt file for that here : https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
I've just written my app.js file and everything is nicely working but the whole file is currently 450 lines long and will be getting bigger.
Is there any best practice about splitting out state manager code or view code into different files (like states.js or views.js) so that everything is a little bit cleaner?
Also on that note... is there a preferred way to split out handlebars templates out into different files? I've currently just got them all defined in one html file which is starting to get a tiny bit unwieldy too.
I was facing the exactly same question two weeks ago, and I didn't wanted to try AMD with requireJS, which seemed a bit complicated for what I wanted to do (and seemed to have advantages but also disadvantages..)
The simple solution which convinced me is the following :
I have 3 folders in my js folder : "models", "controllers", and "views" which contains my js "classes", and I have an "index.html" that import all the js files (I used HTML5 boilerplate to get a convenient index.html).
To be clear, in my index.html, I have at the end of the file something like :
<script src="js/app.js"></script>
<script src="js/models/note.js"></script>
<script src="js/controllers/notesController.js"></script>
<script src="js/controllers/selectedNoteController.js"></script>
<script src="js/views/menuView.js"></script>
<script src="js/views/noteResumeView.js"></script>
<script src="js/views/noteView.js"></script>
<script src="js/views/createNoteView.js"></script>
<script src="js/views/listeNotesView.js"></script>
Hope this help, (and that I didn't misunderstood your question)
You can use RequireJS to load you ember app (including handlebars templates) from different files.
This answer describes how and also links to a sample app showing how to set things up. I have just tried this approach to one of our websites and it works nicely.
I use ember-skeleton for my projects.
To get started simply do the following:
git clone https://github.com/interline/ember-skeleton.git my-app
cd my-app
bundle install
bundle exec rackup
And then go to http://localhost:9292
Also take a look at the wiki for further build tools and templates.
The standard way to do this is now to use ember-cli. Find more information at http://www.ember-cli.com/
Just started using Codeigniter (yesterday) and am wondering what templating features people are using?
Is it possible to create a view and just load it whenerever necessary?
Thanks,
Jonesy
The idea of templating is to create a shared layout with a common header. footer etc and then just have a "body" that changes per-page.
At the most basic level you can just include header and footer inside each of your views like this:
load->view('header'); ?>
This is my page.
load->view('footer'); ?>
That can be fine but start building an application of any real size and you'll find problems.
There are million ways of doing templating, but the way I have used for years is this Template library. It's seen me through 20-30 projects varying projects and is used by many so you know it's tried and tested.
Is it possible to create a view and just load it whenerever necessary?
Yes. This is the typical behavior of the MVC structure, not just in CI. Your views are presentation layers that should be mostly devoid of logic/processing.
Another way to do this is the following.
In your controller, load your template like so
$template_data = array('contains', 'data', 'for', 'template',
'while', 'the', 'specific' => array('may', 'contain',
'data', 'for', 'the', 'view_file'));
$this->load->view('template/needed.php');
In your template, you now have the $template_data array to populate it [if need be!]. You may now load the specific view like so
<div id="yield">
<?php echo $this->view('specific/viewer.php', $template_data['specific']); ?>
</div>
Note:
The template/needed.php should be in the application/views folder.
The specific/viewer.php file should also be in your views directory (i.e. the path to this file should be something like WEB_ROOT/application/views/specific/viewer.php)
The beauty of this is that any view file could be used as a template if need be.