JST 未定义 - Yeoman，Backbone - 无法加载模板

Question

我是 Yeoman 的新手，我使用生成器生成了一个 Backbone 应用程序-backbone

这是我的main.js（需要js配置）

/*global require*/
'use strict';
require.config({
    shim: {,
        handlebars: {
            exports: 'Handlebars'
        }
    },
    paths: {
        jquery: '../bower_components/jquery/dist/jquery',
        backbone: '../bower_components/backbone/backbone',
        underscore: '../bower_components/lodash/dist/lodash',
        handlebars: '../bower_components/handlebars/handlebars'
    }
});

require([
    'backbone'
], function (Backbone) {
    Backbone.history.start();
});

现在我使用 yo backbone:view Login

创建了一个视图

这是生成的视图

define([
    'jquery',
    'underscore',
    'backbone',
    'templates'
], function ($, _, Backbone, JST) {
    'use strict';

    var LoginViewView = Backbone.View.extend({
        template: JST['app/scripts/templates/LoginView.hbs'],

        tagName: 'div',

        id: '',

        className: '',

        events: {},

        initialize: function () {
            this.listenTo(this.model, 'change', this.render);
        },

        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
        }
    });

    return LoginView;
});

当我运行使用 LoginView 的应用程序时，出现错误

Error: Script error for: templates http://requirejs.org/docs/errors.html#scripterror

显然我看到 templates 没有在 main.js 中定义。运行使用 yeoman 生成器

时我错过了什么

Answer 1

如果你犯了和m一样的错误，就验证一下

生成代码后，如果其显示模板未定义或您发现缺少 template.js，请检查以下步骤

运行 g运行t 车把（如果您想忽略任何 warning/errors，请包括 --force）
这将预编译 .hbs 文件生成单个 template.js 文件。

但这里的问题是，开箱即用，template.js 写在 app/.tmp/scripts/template.js 位置。

你可以相应修改main require configure文件，或者打开GruntFile.js修改这个函数

grunt.registerTask('createDefaultTemplate', function () {
        grunt.file.write('/your/custom/path/to/templates.js', 'this.JST = this.JST || {};');
    });

还要验证你是否在 GruntFile.js

中有这一行

grunt.loadNpmTasks('grunt-contrib-handlebars');

如果没有就加在最后（当然不是在功能块之后）

JST 未定义 - Yeoman，Backbone - 无法加载模板

JST is undefined - Yeoman , Backbone - Template cannot be loaded

requirejs

backbone.js

handlebars.js

yeoman

yeoman-generator