在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>