I'm building a single page web app when Backbone.js is my MV* framework. It requires Underscore.js so I wan't to use it as my template engine.
I set the template result as the view content to display in it's render function:
this.el.append( compiledTemplate );
I wonder about the right way to implement the template code:
Should it be a JS code that produce an HTML text?
Should it be an HTML file with a script tag to include the JS code?
How can I separate the display from the logic?
How can I write my CSS in a separate file (not in JS file)?
Well... this is what the Underscore template engine is, isn't it? so, no, your template should be HTML with interpolate tags.
Normally it is a DOM element whose content is the template, and, yes, it is used to be a script tag.
Force your self to only use interpolate Model attributes in your templates. You can pass especial pre-calculated attributes if you use any kind of Decorator technique.
There is not any Backbone or Underscore restriction to you not include your external CSS files as usual.
Related
I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?
i am building a single page application using node.js and angular.js.
I wonder if there is any advantage on using a template engine like jade or ejs since angular has the ng-include directive which let you inject html partials inside your main html page, and of course with angular you have two-way data binding. Any thought on this?
It’s good idea to use Jade (or another template engine) for all html pieces in your project even if you’re creating SPA with AngularJS. Jade allows you to generate templates easy and fast. Templates will be neat and easy-to-read.
As for include directive, stick to the following rule in Angular+Jade projects: use Jade’s include for reusing pieces of html when you create static templates, use ng-include for dynamic purposes when partials depend on the App’s state.
I'm a beginner in AngularJs and I have a simple question: How do I change pages in AngularJS?
Not using router (ng-view) in AngularJS since I need a new html page where there's no common templates. I tried to use "ng-href" but it doesn't work well, since the system works under requireJS and the new html doesnt contain any js or css that I need. (except I force to add them..)
Does anyone has got some idea?
you can achieve with some template engine like "Swig" http://paularmstrong.github.io/swig/ with has a layout template were you base js and css and you can extend it.
I have two different HTML pages that serve up backbone apps. Up until now, I have put all the js templates inside of each respective HTML file.
Now, I'm refactoring a bit and would like to share some backbone views between files. When loading a view that can't find a js template, the whole app will error out. I know the proper way to merge these two would be to have external js templates, using EJS for example, and have 1 template per file, however, I'd like to just have one huge HTML file with embedded <script type='text/template'> and share the template HTML file between my 2 pages. Is this possible? I tried getting the external js templates with AJAX and writing them to the head, but backbone views still can't find them.
Does anyone else choose to have a file with many javascript templates in it? I also find that I have an unmanageable number of files open when I use ejs. Any help would be most appreciated.
I use an extra javascript/coffeescript file and use underscore's templating to take care of everything. This way you can include the templates and put them into as few (or many) files as you would like.
I'm using a single file for all the templates on my current project and it is working out pretty well.
It's a Asp.Net site, so I made the template file into a user control so I can easily include it in any page that uses Backbone.
If you're fetching all templates through AJAX, maybe you don't have to write them to the head.
You can send templates to the client as JSON Object, for example:
{"about":"<p>About</p>...","gallery":"<p>Gallery</p>...","contact":"<p>Contact</p>..."}
After fetching temples you can store them as templates variable inside some object(or locale storage), and after that you can do the following:
var tempStr = templates['about'],
template = new EJS({element:{value: tempStr, id: 'about'}}),
content = template.render();
I want to use the features of the IDE to build the templates therefore I avoid using inline templates. The other option is to have the templates in script tags but doing this causes Visual studio to stop giving intellisense for the template html.
I tried to store the template in a div tag and convert it into a script tag before the backbone templated it but for some reason it caused the attribute values (ex: href="{{test}}") to be encoded.
Is there a better way to build the template?
i put my templates in separate html files, and use require.js to load them with its !text plugin. then there is also the added functionality of the !strip you can use with it
so technically instead of loading html from a script tag, you load if from a separate html file, and thanks to the !strip it does not load the and tags, but only the 's content.
more info on how to use could be seen here:
http://requirejs.org/docs/api.html#text
I use jQuery.get to load templates I store in html files.
http://encosia.com/using-external-templates-with-jquery-templates/
I use jQuery.get as above and then append what's returned to the body of the html document. I'm told there are better ways to do it in a related post.