把手没有出口?

时间:2014-12-11 14:13:31

标签: javascript templates backbone.js requirejs handlebars.js

问题

执行已编译的车把模板时,不会导出全局Handlebars对象。 注意:全局Backbone对象正在运行。

请参阅代码App.templates.todos尝试在todos.js文件中执行时失败,因为未定义App.templates.todos。最终这是因为templates.js文件中的第三行无法执行,因为未定义全局Handlebars对象。

为什么不定义该对象?我在require.js做错了什么?

更新:我已经确认handlebars.runtime.js文件实际上正在执行 templates.js文件,因此require.js在加载todos.js文件时以正确的顺序运行它们。

Bower Components

{
  "name": "todomvc-backbone-requirejs",
  "version": "0.0.0",
  "dependencies": {
    "backbone": "~1.1.0",
    "underscore": "~1.5.0",
    "jquery": "~2.0.0",
    "todomvc-common": "~0.3.0",
    "backbone.localStorage": "~1.1.0",
    "requirejs": "~2.1.5",
    "requirejs-text": "~2.0.5",
    "handlebars": "~2.0.0"
  },
  "resolutions": {
    "backbone": "~1.1.0"
  }
}

main.js

/*global require*/
'use strict';

// Require.js allows us to configure shortcut alias
require.config({
    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module
    shim: {
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        backboneLocalstorage: {
            deps: ['backbone'],
            exports: 'Store'
        },
        handlebars: {
            exports: 'Handlebars'
        },
        templates: {
            deps: ['handlebars'],
            exports: 'App'
        },
        underscore: {
            exports: '_'
        }
    },
    paths: {
        jquery: '../bower_components/jquery/jquery',
        underscore: '../bower_components/underscore/underscore',
        backbone: '../bower_components/backbone/backbone',
        backboneLocalstorage: '../bower_components/backbone.localStorage/backbone.localStorage',
        handlebars: '../bower_components/handlebars/handlebars.runtime',
        templates: '../../../templates',
        text: '../bower_components/requirejs-text/text'
    }
});

require([
    'backbone',
    'views/app',
    'routers/router'
], function (Backbone, AppView, Workspace) {
    /*jshint nonew:false*/
    // Initialize routing and start Backbone.history()
    new Workspace();
    Backbone.history.start();

    // Initialize the application view
    new AppView();
});

todos.js

/*global define*/
define([
    'jquery',
    'backbone',
    'handlebars',
    'templates',
    'common'
], function ($, Backbone, Handlebars, Templates, Common) {
    'use strict';

    var TodoView = Backbone.View.extend({

        tagName:  'li',

        template: App.templates.todos,

        ...
    });

    return TodoView;
});

templates.js

this["App"] = this["App"] || {};
this["App"]["templates"] = this["App"]["templates"] || {};
this["App"]["templates"]["stats"] = Handlebars.template({"1":function(depth0,helpers,partials,data) {

1 个答案:

答案 0 :(得分:0)

来自RequireJS的official documentation

  

shim配置只设置代码关系。加载模块   属于或使用shim配置,正常的require / define调用是   需要。设置填充程序本身不会触发加载代码。

首先,您需要以某种方式调用Handlebars并尝试在templates.js中使用它。