Requirejs 使用预编译把手模板和木偶

我正在使用带有requirejs的木偶，我还想使用预编译的把手模板。 这是怎么回事

这里是我当前的设置：

需要_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
...

$ sudo npm install grunt-contrib-handlebars --save-dev

但是如何正确使用编译的模板呢

更新：仅带车把预编译器 我前面提到的

Grunt

的原因是它对于一个用户来说非常方便。因此，在我看来，了解/了解它是非常重要的

但是，你可以通过单独使用

您仍然需要在RequireJS配置中集成

precompiled.handlebar.js

，请参见答案末尾

原文：咕噜咕噜 为此，你需要一个新的方法，它使这类事情变得容易多了

从现在起，我假设以下文件夹结构：

project/
    assets/
        js/
        templates/

我还假设您已经在您的机器上安装了

---

安装Grunt 安装把手插件 为了预编译模板，您还需要把手：

按如下方式安装：

...
var template = Handlebars.compile(Template_one)
var html = template(context)
template: html
...

$ sudo npm install grunt-contrib-handlebars --save-dev

Grunfile.js 注:

• GrunFile.js是Grunt的配置文件
• 它位于安装Grunt CLI实例的根目录下
• 它是用纯javascript编写的

创建文件：

$ 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');
};

所有插件选项

运行任务 然后，假设您有位于

资产/templates/

中的模板，请运行：

$ grunt handlebars:compile

如果一切正常，您应该能够在

js/precompiled.handlebar.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"];

});

与RequireJS的集成 显然，在

视图中，您必须更改依赖项：

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);  
    });
});

我希望我能投两次票，非常有帮助！有没有什么方法可以简化对模板的访问，而不是使用文件相对路径作为键？我不这么认为。但是车把预编译器中可能有一个选项，我找到了一个名为
processName
的选项。句柄：{compile:{options:{amd:true，processName:function（filePath）{var pieces=filePath.split（“/”）；返回片段[pieces.length-1].split（“.”[0]；}}），src:['src/js/templates/*.handlebar']，dest:'src/js/templates.js'}我不能让它工作。。。你能举例说明要点吗？它一直说in不能调用未定义的函数“template”（应该是handlebar）