使用 jQuery 附加 EJS 部分答案

【问题标题】：Appending EJS partial with jQuery使用 jQuery 附加 EJS 部分
【发布时间】：2016-05-02 00:03:36
【问题描述】：

我正在尝试使用 JQuery 来附加 EJS 部分。我想要做的是在表格中实现无限滚动 - 我正在使用 EJS 将表格的行呈现为部分，并在每个部分中使用更多 EJS 来显示从 Express 传递到视图中的变量。

table.html

<tbody>
  <% include row.html %>
</tbody>

row.html

<% users.forEach(function(user){ %>
  <td><%= user.name %></td>
  ...and so on
<% }) %>

jQuery

$('tbody').append('<%- include row.html %>')

我现在遇到的问题是我无法让最后一个在 jQuery 中工作。我已经调试了这个并将问题隔离到这行代码。我可以做些什么来完成这项工作？

谢谢！

【问题讨论】：

它包含我传入的数组之一的 for 循环，并使用 EJS 呈现内容。我将编辑原始帖子以展示它。
页面上没有呈现任何内容。但我只是在控制台中注意到Uncaught SyntaxError: Unexpected identifier。
如果我删除 jQuery 行，控制台错误消息就会消失。
当我查看页面源代码时，看起来 HTML 标记是从 jquery append 函数内的 EJS 呈现的，只是没有被附加。
有很多渲染的 HTML，所以我不知道将它们全部发布出来有多实用。但可能其中的某些东西阻止了 jquery 的执行，因为当代码存在时滚动停止工作，而当我删除它时滚动再次工作。我将通过源来查看问题可能是什么。感谢您的所有帮助。

标签： javascript jquery node.js express ejs

【解决方案1】：

根据我对 express/ejs 的理解，如果你想在页面加载后（在客户端）添加额外的 EJS 模板，你需要在你的页面上包含 EJS client script，渲染新的 HTML , 并用 jQuery 附加它。

例子：

// Get your data
var additionalUsers = { users: [ { name: 'Bob' } ] };

// Moved and renamed the row.html to: /public/templates/row.ejs
var html = new EJS({ url: '/templates/row'}).render(additionalUsers);

// Append the rendered HTML
$('tbody').append(html);

【讨论】：

【解决方案2】：

确保对您的 HTML 进行转义，这意味着如果它包含单引号，它将不起作用。

$('tbody').append('<p>Johny's HTML AIN'T werkin'!</p>');

应该是

$('tbody').append('<p>Johny\'s HTML IS werkin\'!</p>');

【讨论】：

是的，这就是问题所在。我最终通过在 Express 中渲染部分并将其作为回调传递来解决这个问题。然后我可以在我的 ajax 调用中将其称为 HTML。 Express res.render('stories/table-row', { ... }, function(err, html){ res.send(html); }); jquery $.ajax({ type: 'GET', url: nextUrl, dataType: 'html', success: function(data){ $('tbody').append(data); } }); 这是问题所在，所以将其标记为答案。
是的，这是一种方法。我也这样做了。您还可以抓取任何文件并将其内容放到字符串服务器端，然后对其进行转义。节点是 shiznicks，不是吗？
嗯，到底是因为什么投了反对票？我正在回答他的直接代码示例。当然，最好通过模板来做，但请在否决我的回答之前实际阅读并理解问题。
@JasonSebring，这里也一样，看起来无论是谁对这个问题投了反对票，而且两个答案都没有推理。