Backbonejs with mustache template.

Question

I want to do a simple application using backbonejs with mustache template. Can you give me a sample program??

New node file:

var Person = Backbone.Model.extend({
    defaults: {
        name: 'Guest Worker',
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'li',
    initialize: function(){
        _.templateSettings = {
              interpolate: /\{\{(.+?)\}\}/g
            };

        this.render();
    },
    render: function(){
        var template1 = _.template("Hello {{ name }}!");        
        this.$el.html( this.template1(this.model.toJSON()));
    }
});

This is my js code.

score 2 · Answer 1 · edited May 23 '17 at 12:31

2

Mustache template engine doesn't work this way. Here's a small example from the documentation :

var view = {
    title: "Joe",
    calc: function () {
        return 2 + 4;
    }
};
// output will then contain processed html
var output = Mustache.render("{{title}} spends {{calc}}", view);

Anyway, i would recommend you using Handlebars (http://handlebarsjs.com/) instead of Mustache. It's almost the same syntax (and it has partials as Mustache does), but far more powerful thanks to its helpers.

Finally, you should use something to precompile your templates. You can either use handlebars's one (http://handlebarsjs.com/precompilation.html) or another one like Brunch, or Grunt.

[Edit] OK, let's try to elaborate a bit... I won't give you any complete example (i don't have one right now, and it wouldn't teach you anything), but the one i posted above should be sufficient to understand Mustache basics. Now you have to find a way to precompile your templates, here's an answer with some clues : How to load templates with Hogan.JS from an external file?

edited May 23 '17 at 12:31

Community

1
1

answered Dec 30 '13 at 10:00

Akaryatrh

532
2
10

Actually i have to use Hogan template in Backbone. Is there any possible on it?? – Siva Rajamani Dec 30 '13 at 10:11
Hogan is just a Mustache templating compiler. Unfortunately it's not compatible with handlebar's templates. But using a logic-less templating engine is already a decent choice :) – Akaryatrh Dec 30 '13 at 10:21
No Sir, Just i want to uses mustache with hogan in backbone .. is that possible in here? – Siva Rajamani Dec 30 '13 at 10:23
-_- Hogan USES Mustache templates (and uses the same syntax). So yep, it's possible. – Akaryatrh Dec 30 '13 at 10:27
Thank you Sir.. I am very new to backbone. So can i get any samples using mustache and backbone?? – Siva Rajamani Dec 30 '13 at 10:31

Yomi · Answer 2 · 2016-06-07T00:40:28.107

2

While an underscore template is set like this in Backbone.js:

template: _.template(...)

A mustache template is set like this:

template: Mustache.render.bind(null,<template>) 
    //Mustache.render(template,view,[partials])
    //a partial function is created because this.template should be a function
    //<function>.bind() creates the partial function

don't do these:

template: Mustache.to_html(<template>) // deprecated
// or
template: Mustache.to_html.bind(null,<template>) // deprecated
// Use Mustache.render() and not Mustache.to_html()

edited Jun 07 '16 at 00:40

answered May 30 '16 at 16:55

Yomi

351
3
4

1

And to use it in render: `var output = this.template(this.model.toJSON());` – Emile Bergeron Jun 22 '16 at 14:19

Backbonejs with mustache template.

2 Answers2

Linked