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。将您的partials哈希作为选项传递，您将获得按钮：

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/

在lodash模板中返回函数值

dummy.html

dummy.js

2 个答案: