在Marionette中使用预编译的句柄模板 [英] Using precompiled handlebars templates with Marionette
问题描述
我使用的是带有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'：{
代表：[jquery，undercore，json2]，
出口：Backbone
}，
'marionette'：{
deps：[backbone] ，
出口：Marionette
}，
'jquery-ui'：['jquery']，
'handlebars'：{
exports ：'把手'
}
}
}）;
require（[app]，function（MyApp）{
MyApp.start（）;
}）; b
$ b $ p $ app $ > define（['marionette'，'handlebars'，'text！compiled.handlebars']，函数（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
...
但如何正确使用编译好的模板？
更新：仅使用Handlebars预编译器
之前的 Grunt 是因为它对很多东西非常方便。所以，在我看来，知道/了解它是非常重要的。
但是你可以用Handlebars预编译器：
$ handlebars模板/ * -f js / precompiled.handlebars.js
您仍然需要集成 precompiled.handlebars.js 在您的RequireJS配置中，请参阅答案的结尾。
原文：With Grunt
你需要 Grunt Task Runner ，这使得这些事情变得更容易。
从现在开始，我假设以下文件夹结构：
项目/
资产/
js /
模板/
我也假设您的计算机上已安装了 node.js ！
安装Grunt
$ cd project / assets /
$ sudo npm install grunt --save-dev
安装把手插件
=http://gruntjs.com/plugins> Grunt插件为了预编译模板： href =https://github.com/gruntjs/grunt-contrib-handlebars> grunt-contrib-handlebars
<
$ sudo npm install grunt-contrib-handlebars --save-dev
Gruntfile.js
备注 ：
- A
Gruntfile.js 是Grunt的配置文件
- 它位于安装Grunt CLI实例的根目录。
- 它以纯javascript编写
创建文件：
$ touch Gruntfile.js
然后复制/ pas这是典型的 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
}
}
}）;
//需要所需的插件
grunt.loadNpmTasks（'grunt-contrib-handlebars'）;
};
所有插件选项
运行任务
然后，假设您有模板生活在 assets / templates / ，运行：
$ b
$ grunt handlebars：编译
如果一切正常，您应该能够在
define //这里应该是`handlebars.runtime.js`
//参见：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，d ata）{/ * ... * /}）;
// ...
返回这个[JST];
}）;
与RequireJS集成
显然，你的 Views ，你必须改变你的依赖：
define （[
'marionette'，
//'handlebars'，/ *您不需要这个_here_ * /
'js / compiled.handlebars'
），函数（Marionette，JST）{
/ *编辑简洁* /
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）;
}）;
}）;
I'm using Marionette with requirejs and I would also like to use precompiled handlebars templates.
How does this work?
Here my current setup:
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);
});
});
in my app.js I can get evth. work just fine with non compiled templates, like this:
...
var template = Handlebars.compile(Template_one)
var html = template(context)
template: html
...
but how to do it right with compiled templates?
解决方案 Update: With Handlebars precompiler only
The reason I mentioned Grunt earlier is because it comes very handy for a LOT of things. So, in my opinion, it's very important to know/learn about it.
But you can achieve the exact same thing with the Handlebars precompiler alone:
$ handlebars templates/* -f js/precompiled.handlebars.js
You still have to integrate precompiled.handlebars.js in your RequireJS config, see at the end of the answer.
Original: With Grunt
You'll need the Grunt Task Runner for that, it makes these kind of things a LOT easier.
From now on, I'm assuming the following folder structure:
project/
assets/
js/
templates/
I'm also assuming you have node.js installed on your machine!
Installing Grunt
$ cd project/assets/
$ sudo npm install grunt --save-dev
Installing Handlebars Plugin
You'll also need the Handlebars Grunt plugin in order to precompile your templates:
Install it like this:
$ sudo npm install grunt-contrib-handlebars --save-dev
Gruntfile.js
Notes:
- A
Gruntfile.js is a configuration file for Grunt
- It lives at the root of where is installed your Grunt CLI instance
- It's written in plain javascript
Create the file:
$ touch Gruntfile.js
Then copy/paste this typical Gruntfile for accomplishing what you want to achieve:
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');
};
All plugin options here.
Running the task
Then, assuming that you have templates living in assets/templates/, run:
$ grunt handlebars:compile
If everything is ok you should be able to see your compiled templates in 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"];
});
Integration with RequireJS
Obviously, in your Views, you'll have to change your dependencies:
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);
});
});
这篇关于在Marionette中使用预编译的句柄模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
