lodash _.template() 错误的输出
lodash _.template() wrong output
我正在学习lodash。我的目标是使用 lodash 模板将一组用户输出到我的 html table。但是,我不知道为什么我的模板不起作用。
我的用户
var users = [
{ 'user': 'fred', 'active': false, 'age': 40 },
{ 'user': 'pebbles', 'active': false, 'age': 1 },
{ 'user': 'barney', 'active': true, 'age': 36 }
];
我的模板
let template4 = _.template('<ul>' +
'<% _.forEach(users, function(user) { %>' +
'<li><%- user.user %></li>' +
'<% }); %>' +
'</ul>');
let template4Result = template4({ 'users': users }); // I expect => '<ul><li>fred</li><li>pebbles</li><li>barney</li></ul>'
console.log(template4Result);// => '<ul></ul>'
我不知道应该如何设计我的模板,所以它会遍历我的集合并向其中的每个用户添加一些 html 代码。
您的示例代码有效;下面是 运行 片段。
var users = [
{ 'user': 'fred', 'active': false, 'age': 40 },
{ 'user': 'pebbles', 'active': false, 'age': 1 },
{ 'user': 'barney', 'active': true, 'age': 36 }
];
let template4 = _.template('<ul>' +
'<% _.forEach(users, function(user) { %>' +
'<li><%- user.user %></li>' +
'<% }); %>' +
'</ul>');
let template4Result = template4({ 'users': users });
console.log(template4Result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
问题是您传递到模板中的 users
变量没有任何项目。所以你没有得到你期望的数据。
如果您要异步检索用户(通过 AJAX 调用),则需要使用回调仅在 ajax 调用返回后生成模板。下面是一个伪示例(ajax
不是真正的接口)。
ajax.get(function(users) {
// this would be the "success" callback
// we're now able to render the template since we have the data
let template4Result = template4({ 'users': users });
})
你可以试试这个:
let template4 = _.template('<ul>' +
'<% _.forEach(users, function(value, key) { %>' +
'<li><%- value.user %></li>' +
'<% }); %>' +
'</ul>');
我正在学习lodash。我的目标是使用 lodash 模板将一组用户输出到我的 html table。但是,我不知道为什么我的模板不起作用。
我的用户
var users = [
{ 'user': 'fred', 'active': false, 'age': 40 },
{ 'user': 'pebbles', 'active': false, 'age': 1 },
{ 'user': 'barney', 'active': true, 'age': 36 }
];
我的模板
let template4 = _.template('<ul>' +
'<% _.forEach(users, function(user) { %>' +
'<li><%- user.user %></li>' +
'<% }); %>' +
'</ul>');
let template4Result = template4({ 'users': users }); // I expect => '<ul><li>fred</li><li>pebbles</li><li>barney</li></ul>'
console.log(template4Result);// => '<ul></ul>'
我不知道应该如何设计我的模板,所以它会遍历我的集合并向其中的每个用户添加一些 html 代码。
您的示例代码有效;下面是 运行 片段。
var users = [
{ 'user': 'fred', 'active': false, 'age': 40 },
{ 'user': 'pebbles', 'active': false, 'age': 1 },
{ 'user': 'barney', 'active': true, 'age': 36 }
];
let template4 = _.template('<ul>' +
'<% _.forEach(users, function(user) { %>' +
'<li><%- user.user %></li>' +
'<% }); %>' +
'</ul>');
let template4Result = template4({ 'users': users });
console.log(template4Result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
问题是您传递到模板中的 users
变量没有任何项目。所以你没有得到你期望的数据。
如果您要异步检索用户(通过 AJAX 调用),则需要使用回调仅在 ajax 调用返回后生成模板。下面是一个伪示例(ajax
不是真正的接口)。
ajax.get(function(users) {
// this would be the "success" callback
// we're now able to render the template since we have the data
let template4Result = template4({ 'users': users });
})
你可以试试这个:
let template4 = _.template('<ul>' +
'<% _.forEach(users, function(value, key) { %>' +
'<li><%- value.user %></li>' +
'<% }); %>' +
'</ul>');