I am using EmberJS with HandleBars and using the Yeoman setup, (but I updated dependencies to the latest).
I have a relatively large application.hbs, and I want to separate it into different files like top-bars.hbs and main-content.hbs and so on, then I want to include them in the application.hbs. but I do not have any views for them, just some separation of the big file, I do not want to make ajax requests for those templates, just want to separate and then include them.
How can I do this in emberJS?
I think what you maybe looking for is a partial. What you would do is make a partial file in the directory you want most likely somewhere with all the other templates. The resolver complains about either leading underscores or dashes in Yeoman so if one blows up try the other this is mostly for a visual indication when looking through your files which ones are partials. So make _top-bars.hbs and put the code you want in there. and the in the application.hbs just do `{{partial "top-bars"}} and it will put the template into the application template without changing the scope.
Related
I want to use a third party app that did not use adequate django principles:
templates \w hard coded urls instead of {% url ... %} syntax
templates \w hard coded static files instead of {% static ... %} syntax
makemigrations is left to the user/deployer
all templates directly in templates folder, like 500.html, login.html, etc
interesting nested app-structure, where some apps are loaded depending on the configuration (i.e. advanced settings.py logic manipulating INSTALLED_APPS)
These make it hard to include the app in urls /suburl/.... I spent 15 minutes thinking this was rewritable, and a git PR would be a good idea, after realizing it might not be.
The most crucial problem, hard coded urls, is in the templates. Hence I want to copy the templates to my parent-project in a subfolder, fix them with generated urls, and redefine template-resolution for this particular app, but not for all apps.
This should keep my template-namespace relatively clean. Also, this way I avoid having to change all the view-functions to specify a better namespaced template. I don't want to get too involved in these, because these functions are massive.
Can I do this, define a customized DjangoTemplates for ONE specific app, but not the others?
Hello everyone and thank you for taking time to read this.
I've been using Phalcon for quite a while for a high performance JSON/XML API.
The backend managing this application was/is still driven by an oudated version of symfony, but it is gonna be dropped in favour for Phalcon and the Volt Template engine.
Now my problem is the following:
Imagine a base application and a basic template and the application is modularized. Most modules are gonna be developed by different teams but they all have to integrate niceley, which from the program logic side is not a problem.
But imagine the following:
You have a simple page, some forms, head, navigation, etc, etc.
Now someone wants to add a module which injects a template block into the footer for whatever purpose. For example adding a TagCloud (for SEO purposes) into the footer.
The idea here is, that the plugin has way to edit any template files other than the ones it brings itself.
How can this be achieved without having to change the base templates after the initial development?
The idea is basically to hook into a event, lets call it TEMPLATE_RENDER for simplicity.
TEMPLATE_RENDER is fired, every listener that is registered for it now has its chance to add stuff to the template like additional blocks etc. All without having to manually change the core templates.
It would be sufficient if there is a way to simply add a bunch of template files together in Volt and output the compiled result.
EDIT:
Okay, after some thought what I'm looking for in Volt is this:
Compiler#compileMultipleFiles(String... files);
So it can be used like this:
$compiler->compileMultipleFiles('/path/to/template1','/path/to/template2', ...);
Which would do nothing else "in theory" than take everything in file1, file2, ..., fileN and put it into one large file and then compile that as a single template. If it is not yet possible I could emulate that function by simple having each files contents combined into a single file or cache variable and use compileString() but that would break any relative paths in the template, which would be a problem.
I could also compile each template down manually, but than I would end up with an pure html document without the ability to append to blocks in the main template.
Apparently there is no such function directly.
You can however use an array and iterate over this area at the end of the primary template and dynamically include any file passed into there.
I believe that you're looking for a Volt include. You can leave some tests in your templates like:
{% if foo.enabled %}
{% include "foo/bar.volt" %}
{% endif %}
If you need something more complex than this you can use template inheritance also.
In my meteor project I can separate the javascript files in the client and server directories. But I cannot find a solution for all the html templates I need to define.
The problem I have now is that I need to embed this svg image in a template too, which is a huge image. So now I have this html file which is now 2 times 'huge' :)
The reason I need to have this svg inline in my html/template is because I need to style it with css. Any suggestions ?
You can put the .html files anywhere! Besides the server directory, of course. The natural place to store them is the client folder, and a good practice is to keep each template in a separate file. The Javascript code related to that template (data helpers, events, callbacks) can then go to a file with the same name and with extension .js instead of .html. These are the basics if you want to keep your project tidy.
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'm using precompiled templates for several reasons:
Performance (no need to re-compile at runtime)
Code separation (cleaner than embedding <script> tags and hardcoding in JS)
Content security policy (this is for an extension).
Basically, I'm generating templates.js via the handlebars command line utility, based on several template.handlebars files. Next I try to bring these templates into Ember with the following loop:
for (var name in Handlebars.templates) {
var template = Handlebars.templates[name];
Ember.TEMPLATES[name] = template;
}
The result is weird: text seems to be loaded, but many template features (eg. {{outlet}}) don't work. I suspect that this is because Handlebars and Ember-Handlebars are not the same thing.
I guess there are two options (and questions):
Precompile Ember-friendly templates (how can I do this via a command line?)
Properly import Handlebars templates into Ember (how?)
UPDATE: As per the answer, Ember.Handlebars is not the same as Handlebars, so the precompilation is different. Wrote a simple script to precompile for Ember: https://gist.github.com/3723927
Yes, the plain Handlebars compiler compiles to different JavaScript than Ember.Handlebars, so you cannot consume its output with Ember.
I don't know of a way to run Ember.Handlebars through the command line, though it should be possible in principle to write something.
To find out how to precompile with Ember.Handlebars, take a look at the source code of ember-rails - it supports precompilation.