我正在使用带有requirejs的Marionette,我也想使用预编译的把手模板。 这是如何工作的?
这是我当前的设置:
require_main.js:
requirejs.config({
baseUrl: "/",
paths: {
'text': 'vendor/javascripts/text',
'backbone': "vendor/javascripts/backbone",
'backbone.wreqr': "vendor/javascripts/backbone.wreqr",
'backbone.babysitter': "vendor/javascripts/backbone.babysitter",
'jquery': "vendor/javascripts/jquery",
'jquery-ui': 'vendor/javascripts/jquery-ui',
'json2': "vendor/javascripts/json2",
'marionette': "vendor/javascripts/backbone.marionette",
'underscore': "vendor/javascripts/underscore",
'handlebars': "vendor/javascripts/handlebars"
},
shim: {
'underscore': {
exports: "_"
},
'backbone': {
deps: ["jquery", "underscore", "json2"],
exports: "Backbone"
},
'marionette': {
deps: ["backbone"],
exports: "Marionette"
},
'jquery-ui': ['jquery'],
'handlebars': {
exports: 'Handlebars'
}
}
});
require(["app"], function(MyApp){
MyApp.start();
});
app.js:
define(['marionette', 'handlebars', 'text!compiled.handlebars'], function(Marionette, Handlebars, Template_one) {
var MyApp = new Marionette.Application();
MyApp.addRegions({
mainRegion: "#main-region"
});
MyApp.StaticView = Marionette.ItemView.extend({
template: Template_one(context)
});
MyApp.on("initialize:after", function(){
var staticView = new MyApp.StaticView();
MyApp.mainRegion.show(staticView);
});
});
在我的app.js中我可以得到evth。使用非编译模板可以正常工作,如下所示:
...
var template = Handlebars.compile(Template_one)
var html = template(context)
template: html
...
但是如何使用已编译的模板做到这一点?
答案 0 :(得分:16)
之前我提到Grunt
的原因是因为LOT of things非常方便。因此,在我看来,了解/了解它非常重要。
但是你可以单独使用Handlebars precompiler完成同样的事情:
$ handlebars templates/* -f js/precompiled.handlebars.js
您仍然必须在您的RequireJS配置中集成precompiled.handlebars.js
,请参阅答案的最后部分。
你需要Grunt Task Runner,这使得这些事情变得更容易。
从现在开始,我假设以下文件夹结构:
project/
assets/
js/
templates/
我还假设你的机器上安装了node.js!
$ cd project/assets/
$ sudo npm install grunt --save-dev
您还需要Handlebars Grunt plugin才能预编译模板:
像这样安装:
$ sudo npm install grunt-contrib-handlebars --save-dev
备注:
Gruntfile.js
是Grunt的配置文件创建文件:
$ touch Gruntfile.js
然后复制/粘贴这个典型的Gruntfile
以完成您想要实现的目标:
module.exports = function(grunt) {
/*
* https://github.com/gruntjs/grunt/wiki/Configuring-tasks
*/
grunt.initConfig({
"handlebars": {
compile: {
options: {
amd: true
},
src: ["templates/**/*.html"],
dest: "js/precompiled.handlebars.js"
}
}
});
// Requires the needed plugin
grunt.loadNpmTasks('grunt-contrib-handlebars');
};
所有插件选项here。
然后,假设您的模板位于assets/templates/
,请运行:
$ grunt handlebars:compile
如果一切正常,您应该能够在js/precompiled.handlebars.js
中看到已编译的模板:
define([
// Should be `handlebars.runtime.js` here
// See: http://handlebarsjs.com/precompilation.html
'handlebars'
], function(Handlebars) {
this["JST"] = this["JST"] || {};
this["JST"]["templates/template_one.html"] = Handlebars.template(function(Handlebars,depth0,helpers,partials,data) { /* ... */ });
this["JST"]["templates/template_two.html"] = Handlebars.template(function(Handlebars,depth0,helpers,partials,data) { /* ... */ });
//...
return this["JST"];
});
显然,在你的Views
中,你必须改变你的依赖关系:
define([
'marionette',
//'handlebars', /* You don't need this _here_ anymore */
'js/compiled.handlebars'
], function(Marionette, JST) {
/* edited for brevity */
MyApp.StaticView = Marionette.ItemView.extend({
template: JST["templates/template_one.html"]
});
MyApp.on("initialize:after", function(){
var staticView = new MyApp.StaticView();
MyApp.mainRegion.show(staticView);
});
});