Return lodash 模板中的函数值

Question

我正在使用 lodash 模板呈现 html 模板客户端。有许多 html 模板正在重复。所以，我决定在另一个模板中调用重复模板。例如：

dummy.html

<%= _.template(templates['button'])({ title: "click me" }) %>

上述方法有效，但当我调用 _.template 一次又一次地呈现一个按钮时，我想创建一个全局函数，如下所示：

dummy.js

var sb = {
    setButton: function(data){
        data = data || {};
        return _.template(templates['button'])(data);
    },
    /* other functions */
}

然后在 dummy.html 中调用为：

<%= sb.setButton({ title: "click me" }) %>

但这不起作用。（只是不呈现）

我这里做错了什么？

编辑:

我将 console.log(this) 放在 setButton 函数中。它没有在 chrome 控制台中记录任何内容。然后我从 lodash 模板语法中删除了 =，然后它记录了 sb 全局变量。

<% sb.setButton({ title: "click me" }) %>

但是上面那个还是没有渲染按钮。

Answer 1

您编译的模板不知道 sb 是什么。假设你用 _.template(src)() 之类的东西调用你的主模板，Lodash 会因为看起来像 ReferenceError: sb is not defined 的错误而阻塞它。将您的部分散列作为选项传递，您将获得按钮：

var templates = {
    button: '<button><%= title %></button>'
};
var sb = {
    setButton: function(data){
        data = data || {};
        return _.template(templates['button'])(data);
    }
};

var src = '<%= sb.setButton({ title: "click me" }) %>'
document.getElementById('result').innerHTML = _.template(src)({sb: sb});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id='result'></div>

如果您希望直接使用局部片段而不将它们传递给您的模板，请将全局片段附加到 _，例如 _.sb:

var templates = {
    button: '<button><%= title %></button>'
};
_.sb = {
    setButton: function(data){
        data = data || {};
        return _.template(templates['button'])(data);
    }
};

var src = '<%= _.sb.setButton({ title: "click me" }) %>'
document.getElementById('result').innerHTML = _.template(src)();

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<div id='result'></div>

Answer 2

您需要使用 sb 将数据传递扩展到模板，有些像这样：

var sb = {
    setButton: function(data){
        data = data || { name: "default" };
        return _.template("<%= name %>")(data);
    },
}

var tmpl = _.template( '<%= setButton({ name: name }) %>' );
var data = _.extend({name:"click"}, {sb});
tmpl(data)

http://jsfiddle.net/stdob/bjdw63wb/2/

Return lodash 模板中的函数值

Return function value in lodash templates

html

javascript

templates

backbone.js

lodash

dummy.html

dummy.js