如何使用Backbone.js在客户端Jade模板中使用帮助程序？

Question

我想将momentjs（更常见的是，任何其他功能）用作Jade模板中的助手，两者用于服务器和客户端。在服务器（Express.js 3.x）上，我将它添加到app.locals，它工作正常：

服务器侧

// Locals
app.locals.moment = require('moment');

// Routes
app.get('/', function (req, res) {
    res.render('index.jade')
});

app.listen(config.get('server').port);

因此，当服务器呈现模板（moment）并在index.jade作为纯HTML提供时，使用/帮助程序可以正常工作。

客户端

在客户端（RequireJS模块系统）上，我正在使用Backbone.js和Jade来呈现视图。如何在moment中使用navbar.jade帮助程序？

define(
    ['jade', 'backbone', 'text!views/navbar.jade'],
    function (Jade, Backbone, navbarTemplate) {
        return Backbone.View.extend({

            initialize: function () {
                this.template = Jade.compile(navbarTemplate);
            },

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

               return this;
            }

        });
    }
);

编辑：根据Peter Lyons的建议，我已经包装了compile个功能。 moment有效但foo没有（p= moment() vs p= foo()，后者让我无法调用未定义的函数）：

define(['jade', 'lodash', 'moment'], function (Jade, _) {

    return {
        compile: function(str, options) {

            options.locals = _.extend({
                moment:  require('moment'),
                foo: function () { return 'bar'; }
            }, options.locals);

            return Jade.compile(str, options);
        }
    };
});

Answer 1

当您在浏览器中调用已编译的模板函数时，没有开箱即用的app.locals，因此您必须对其进行编码。

//customJade.js module
define(function (require, exports) {
    var jade = require('jade');
    var moment = require('moment');
    exports.compile = function(jadeString) {
      //build the normal jade template function
      var jadeFn = jade.compile(jadeString);
      //build a wrapper function with same API
      var customFn = function(locals) {
        //in the wrapper, add your shared locals as needed
        locals.moment = locals.moment || moment;
        locals.appName = "Super Happy Fun App!";
        //return the result of the real jade template function,
        //but with combined locals
        return jadeFn(locals);
      };
      //return your wrapper function instead of the regular jade function
      return customFn;
    }
});

//your backbone view module
define(['customJade', 'jadeTemplateString'], function (customJade, jadeTemplateString) {
   //blah blah your View subclass...
   template: customJade.compile(jadeTemplateString),
   //...
});