Question

我想使用带有胡子模板的backbonejs做一个简单的应用程序。你能给我一个示例程序吗？

新节点文件：

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()));
    }
});

这是我的js代码。

Answer 1

Mustache模板引擎无法正常工作。以下是文档中的一个小例子：

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

无论如何，我建议您使用Handlebars（http://handlebarsjs.com/）而不是Mustache。这几乎是相同的语法（并且它像Mustache一样有部分），但由于它的助手而更加强大。

最后，您应该使用一些东西来预编译模板。你可以使用车把（http://handlebarsjs.com/precompilation.html）或另一个像Brunch或Grunt。

[编辑] 好的，让我们试着详细说明......我不会给你任何完整的例子（我现在没有一个，它不会教你什么），但我上面发布的那个应该足以理解Mustache基础知识。现在你必须找到一种预编译模板的方法，这里有一些答案，有一些线索：How to load templates with Hogan.JS from an external file?

Answer 2

虽然在Backbone.js中设置了下划线模板：

template: _.template(...)

小胡子模板设置如下：

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

不要这样做：

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

Backbonejs与胡子模板。

2 个答案: