在 lodash 模板中返回函数值答案

【问题标题】：Return function value in lodash templates在 lodash 模板中返回函数值
【发布时间】：2015-07-07 07:08:50
【问题描述】：

我正在使用 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" }) %>

但上面的仍然没有渲染按钮。

【问题讨论】：

如果将console.log(this) 添加到您的dummy.js 函数（与原始函数相比），会打印什么？
@royhowie 我在帖子编辑部分添加了解释。

标签： javascript html templates backbone.js lodash

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：