CODEWITHSUNDEEP
node.jsbackbone.jspughamlc
user1323136
user1323136

Reputation: 899

Nodejs Backbone Templates

I have worked a lot with rails, requirejs and backbone and know how to use haml coffee templates in rails.

App = new Backbone.Marionette.Application()



App.addInitializer (options) ->
  Backbone.history.start()
  alert "yay"


$ ->
 alert "yay"
 App.start()

How do i do it in Node.js, I have a Node.js app and i am at a deadend with regards to how do i get a template to compile client side, i am not stuck on haml coffee, any template engine will do, jade is fine too, underscore too. Just a good starting point so that i can get on with building the backbone app in node.js.

Any Help is appreciated!

Upvotes: 0

Views: 506

Answers (2)

Netzpirat
Netzpirat

Reputation: 5501

You usually don't compile the templates on the client (expect the templates are edited directly in the browser), instead they are compiled in the backend and rendered in the browser.

Compile the templates

In this step you compile the template source code to a JavaScript file that contains a render function.

You can either use haml-coffee on the command line and make a script in your build process or make use of the projects listed in the integration section of the Haml-Coffee README.

Grunt is a popular solution to run certain tasks and with Grunt-Haml you have certainly a flexible build solution for your project.

Render the templates

To render the templates with Marionette you need to make sure the template render function is available on the client. Just type the configured namespace into the developer tools to see if the template functions are registered:

Registered template functions

If this is fine, you need to have a custom template render function:

Backbone.Marionette.Renderer.render = (template, data) ->
  if JST[template]
    JST[template](data)
  else if _.isFunction(template)
    template(data)
  else
    console.error 'Template %s not found', template

Now you can simply define the view template and it'll be rendered properly:

class App.Views.Login extends Backbone.Marionette.ItemView
  template: 'shared/_login'

Upvotes: 0

slobodan.blazeski
slobodan.blazeski

Reputation: 1040

I don't suggest dragging the templates to the client and compiling them there,the right way would be to use some framework such as www.socketstream.com that offers what you want and much more. If you're against frameworks quick and dirty solution to compiling them on the server and calling them as function on the client will be :

// compile.js 
var fs = require("fs")
    ,jade = require("jade");

exports.build = function(templatesDir) {
    var js = "var Templates = {}; \n\n";
    var files = fs.readdirSync(templatesDir);
    var jadeFiles = files.filter(function(file) {
        return file.substr(-5) === ".jade";
    });
    for(var i = 0; i < jadeFiles.length; ++i){
    var filePath, key;
    var file =  jadeFiles[i];
    key = file.substr(0, file.indexOf("."));
    filePath = templatesDir + file;
    var jadeSource =  fs.readFileSync(filePath);
    js += "Templates." + key + " = " + jade.compile(jadeSource, {
        debug: false,
        client: true
    }).toString() + "; \n\n";
}
return js;

};

// On the server.js
// Compile views
var viewsPath = path.join(__dirname, 'views/');
var generatedJs =  require('./compile').build(viewsPath);
var savePath = path.join(__dirname, 'public/js/lib/templates.js');
fs.writeFile(savePath, generatedJs, function (err) {
    if (err) throw err;
});

// Then on the client include js/lib/templates.js and use templates like this
FactSummaryView = Backbone.View.extend({
        template: Templates.issueSummary,
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));

        return this;
    }
});

// Also add templates.js to nodemonignore if you're using nodemon
./public/js/lib/templates.js
/public/js/lib/templates.js

Upvotes: 1

Related Questions