Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
backbone-template-manager
Advanced tools
Simple template manager for your Backbone application. This library allows you to:
_.template
by default).npm
: npm install backbone-template-manager --save
.bower
: bower install backbone-template-manager --save
.Once installed, import the library using ES6 import, or import the ES5 script (transpiled with babel):
<script type="text/javascript" src="/vendors/backbone-template-manager/es5/backbone-template-manager.js"></script>
Here is an example:
import Backbone from 'backbone';
import {TemplateView} from 'backbone-template-manager';
export class MyView extends TemplateView {
initialize() {
this.model = new Backbone.Model({
id: 1,
name: 'John Doe'
});
}
templates() {
return 'my-template';
}
}
What happens here?
TemplateView
class.initialize
function (class Backbone application).template
function return the template id associated to the view.And that's all!
Note that following events will be triggered:
render:loading
when the view start rendering (before any template download and rendering).render:success
when the view is fully rendered (templates are fetched, view is up to date).render:error
when the view cannot be rendered because of missing templates.How it works?
The render
method comes with a default implementation:
render
method do nothing).render:loading
event and execute the view onBeforeRender
method.templateManager
method view).toJSON
method from the view: by default return an object containing a model
property (with model.toJSON
as the value) and/or a collection
property (result of collection.toJSON
method)._.template
under the hood).render:success
event and execute view onRendered
and onRender
methods without errors.render:error
event and execute view onRendered
and onRenderError
if something bad happened.How templates are downloaded?
By default, templates are downloaded using Backbone.ajax
.
GET
./templates/
)..template.html
).In the example below, the requested URL will be /templates/foo.template.html
.
Note that all downloaded templates are put in a cache, so don't worry about network request when you render a view several times!
By default, the template manager fetch templates from a remote server using Backbone.ajax
.
Let's say you want to define your DOM in your HTML, such as:
<script type="text/template" data-template-id="my-template">
<div>Hello <%= name %></div>
</script>
You can override the default template with an instance of the DomTemplateManager
:
import Mustache from 'mustache';
import {overrideTemplateManager, DomTemplateManager} from 'backbone-template-manager';
// Just given an instance of the new template manager as the first parameter.
// Should be done when your application starts.
overrideTemplateManager(new DomTemplateManager({
// Override default selector.
// Default is `[data-template-id="${templateId}"]`
selector: templateId => `#${templateId}`
}));
By default, the selector in the DOM will be defined as [data-template-id="${templateId}"]
, but it may be override (see below).
Now, the template
method of your view must return the selector in the DOM to query the DOM appropriately:
import Backbone from 'backbone';
import {TemplateView} from 'backbone-template-manager';
export class MyView extends TemplateView {
initialize() {
this.model = new Backbone.Model({
id: 1,
name: 'John Doe'
});
}
templates() {
return 'my-template';
}
}
Note that the overrideTemplateManager
method can also be used to override the default prefix
, suffix
and method
parameters:
import Mustache from 'mustache';
import {overrideTemplateManager, RemoteTemplateManager} from 'backbone-template-manager';
// Just given an instance of the new template manager as the first parameter.
// Should be done when your application starts.
overrideTemplateManager(new RemoteTemplateManager({
prefix: '/app/templates',
suffix: '.mustache',
method: 'JSONP'
}));
The default compile function can be overridden with a custom implementation. Let's say you want to use Mustache (or Handlebars) as the default template engine:
import Mustache from 'mustache';
import {overrideCompile} from 'backbone-template-manager';
// Override the compile function.
// Compile function must return a function that can be used to render template
// with data model.
// Should be done when your application starts.
overrideCompile(html => {
return data => Mustache.render(html, data);
});
Some libraries, such as Mustache, allow you to define partials:
<div>
<span>Hello {{ name }}</span>
<div>{{ > user-view }}</div>
</div>
In the template below, user-view
is a partial that can be set during template compilation:
Mustache.render(mainTemplate, data, {
'user-view': '<div>User information</div>'
});
This little library can deal with partials, simply defined an array of templates in your view:
import Backbone from 'backbone';
import {TemplateView} from 'backbone-template-manager';
export class MyView extends TemplateView {
initialize() {
this.model = new Backbone.Model({
id: 1,
name: 'John Doe'
});
}
templates() {
return ['my-template', 'user-view'];
}
}
When an array is defined as a template view, the first entry in the array will be the first
argument of the compile
function, other templates will be given as second argument as a dictionary where the
entry is the template id and the value is the template. You can now render templates easily:
import Mustache from 'mustache';
import {overrideCompile} from 'backbone-template-manager';
overrideCompile((html, partials) => {
return data => Mustache.render(html, data, partials);
});
The remote template manager can be optimized by sending all templates in a javascript file stored in a variable (see here) and query this dictionary instead of querying the remote server:
import Mustache from 'mustache';
import {overrideTemplateManager, RemoteTemplateManager} from 'backbone-template-manager';
// Just given an instance of the new template manager as the first parameter.
// Should be done when your application starts.
overrideTemplateManager(new RemoteTemplateManager({
JST: true
}));
Three options are available:
JST: true
: assume that templates may already exist in window.JST
.JST: '__JST__'
: assume that templates may already exist in window.__JST__
.JST: {}
: send the templates object directly during the construction.If templates does not exist in the JST variable, a classic HTTP request will be made as a fallback. Note that templates should be stored with the template id as the key (not the full URL), for example:
import Backbone from 'backbone';
import {TemplateView} from 'backbone-template-manager';
export class MyView extends TemplateView {
initialize() {
this.model = new Backbone.Model({
id: 1,
name: 'John Doe'
});
}
templates() {
return 'my-template';
}
}
The template manager will assume that window.JST
will be equal to:
{
"my-template": "<div>My Template</div>"
}
This little library has been created in 2013 (still used in production) and open sourced in 2016 after a rewrite in ES6.
MIT.
FAQs
Simple template manager for Backbone
The npm package backbone-template-manager receives a total of 0 weekly downloads. As such, backbone-template-manager popularity was classified as not popular.
We found that backbone-template-manager demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.