Sails JS with EJS but linker to compile handlebars

问题:

I'm a bit new to Node and javascript backend frameworks so please bear with me:

I've been searching around to find a nice combination of front-end, back-end (MVC)frameworks to work with Node, and I've currently decided upon using SailsJS/EmberJS to make a boilerplate which I can play around with and maybe use for future projects.

SailsJs (out of the box generated app) uses EJS to compile back-end views. EmberJs (by default, starter kit) uses handlebars to compile front-end views.

I want to keep the templating language (EJS) as it is with one exception regarding SailsJS' linker. It currently compiles public templates as 'jst.js' which are not compatible with handlebars. I would like to change this so 'jst.js' will contain handlebars compiled templates therefore they get served to the front-end (ember app) all ready to use.

I assume that an additional node library would be required for this. How would I go about configuring Gruntfile.js to use that library in order for the linker to output handlebars compiled templates to the public directory ?

回答1:

The EJS templates in Sails have little to do with Ember's templates. One of the key aspects to Ember and other client-side application frameworks is how the rendering is done clientside and no longer on the server. Other than using a Sails EJS template to deliver the initial payload to the user; Sails will work best with Ember as a REST API. As far as how to deal with precompiling handlebar templates to optimize the initial payload, you could take a look at how Ember App Kit achieves it. In fact, EAK is a great place to start for a number of reasons.

回答2:

With the current version of grunt-ember-templates somehow the dev: section did not work. Once I stripped it out it worked right away:

var pipeline = require('../pipeline');

module.exports = function(grunt) {

grunt.config.set('emberTemplates', {
        compile: {
            options: {
                amd: true,
                templateBasePath: pipeline.templateBasePath
            },
            files: {
                '.tmp/public/jst.js': pipeline.templateFilesToInject
            }
        }
});

grunt.loadNpmTasks('grunt-ember-templates');
};

回答3:

You've probably already figured it out by now, but for the record...

Check out https://github.com/dgeb/grunt-ember-templates for that "additional node library"

and see http://sailsjs.org/#/documentation/concepts/Assets/TaskAutomation.html?q=task-configuration for how to configure the task.

The way I got it working was to create the following file at tasks\config\emberTemplates

var pipeline = require('../pipeline');

module.exports = function(grunt) {

    grunt.config.set('emberTemplates', {
        dev: {
            compile: {
                options: {
                    amd: true,
                    templateBasePath: pipeline.templateBasePath
                },
                files: {
                    '.tmp/public/jst.js': pipeline.templateFilesToInject
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-ember-templates');
};

And modify tasks\pipeline.js with these lines

var templateBasePath = 'assets/templates/';
var templateFilesToInject = [
  templateBasePath + '**/*.hbs' //Note that whatever is replaced by '**/' will be included in the template name (necessary for defining components see http://emberjs.com/guides/components/defining-a-component/).
];

module.exports.templateFilesToInject = templateFilesToInject;
module.exports.templateBasePath = templateBasePath;

and of course put your templates in assets/templates with the .hbs extension.