Question

我的逻辑：

/* GET /events/list */
router.get('/events/list', function(req, res) {

    new db.Tag({})
    .fetchAll()
    .then(function(tags) {

        res.locals.title = "List of events";
        res.locals.tags = tags;
        res.render('events/list.ejs');
    });
});

我的观点：

<% for (var tag in tags) { %>
    <div class="checkbox">
        <label>
             <input type="checkbox" data-tag-id="<%= tag.tagId %>" />
             <%= tag.name %>
        </label>
    </div>
<% } %>

我得到了什么：

 [x] undefined
 [x] undefined
 [x] undefined
 [x] undefined

我应该得到什么：

 [x] foo
 [x] bar
 [x] zort
 [x] troz

我也试过传递

 res.locals.tags = tags.toJSON();

以及

 res.locals.tags = JSON.stringify(tags);

那么..我如何最终将我的收藏传递给EJS视图？

我也在console.log(tags)之后记录了{then(function(tags)}，并且我正确地获取了模型（在这种情况下是标签）。

我还在我的EJS视图中尝试过tag.forEach但是这样的原生javascript数组：[{tagId:1, name:"blah"}, {tagId:2, name"Foo"}]没有＆＃34; forEach＆＃34;实施方法

Answer 1

在模板中，使用forEach（如果可用）或使用索引循环。

<强> server.js

res.locals.tags = tags.toJSON();

view.html（使用[].forEach）

<% tags.forEach(function(tag) { %>
    <div class="checkbox">
        <label>
             <input type="checkbox" data-tag-id="<%= tag.tagId %>" />
             <%= tag.name %>
        </label>
    </div>
<% }) %>

view.html（带索引）

<% for (var i in tags) { %>
    <div class="checkbox">
        <label>
             <input type="checkbox" data-tag-id="<%= tags[i].tagId %>" />
             <%= tags[i].name %>
        </label>
    </div>
<% } %>

Answer 2

这是使用Array.prototype.forEach的替代方法。您将Bookshelf集合提供给视图。 Bookshelf.Collection有自己的.forEach：

<强> server.js

res.locals.tags = tags; // NOT .toJSON()

<强> view.html

<% tags.forEach(function(tag) { %>
    <div class="checkbox">
        <label>
             <input type="checkbox" data-tag-id="<%= tag.id %>" />
             <%= tag.get('name') %>
        </label>
    </div>
<% }) %>

使用Bookshelf.JS将数组传递到EJS视图

2 个答案: