使用 JQuery 将 ejs 模板注入 html

Question

可以通过 JQuery 注入来自 ejs 模板的 HTML 吗？

我有一个 Index 文件，其中包含一个导航栏和一个内容区域，以及一个我正在尝试呈现的示例 TestButton 模板。

Index.ejs

<ul>
    .
    .
    <li id="listItem"><a href="#test_page">Nav Bar Item</a></li>
</ul>

<div id="display">
</div>

<script>
    $('#listItem').click( function(){
         // Note - testButtonTemplate is being properly passed in from my routes
         $('#display').html( <%- render( testButtonTemplate, {} ) %> );
    });
</script>

TestButton.ejs：

<a href="#" class="btn btn-primary" id="test-button">
    Click Me!
</a>

我尽我所能简化我的代码，但基本上，当我点击导航栏中的链接时，我想在display div 中动态加载一个页面。

---

导航栏有效。
点击功能有效。
如果我在 div 中手动显示 ejs 模板，它可以工作。
EX:

<div id="display">
    <%- render( testButtonTemplate, {} ) %>
</div>

---

否则，当我尝试使用上面的示例代码加载页面时，这是我得到的错误：
“Uncaught SyntaxError: Unexpected token ”和原始 html 看起来像：

.
.
<script>
$('#listItem').click( function(){
    $('#my-test').html( <a href="#" class="btn btn-primary" id="test-button">
        Click Me!
    </a>
    );
});
</script>

因此您可以看到已从 ejs 模板类中正确检索到 html，但 JQuery 不喜欢我格式化该数据的方式。看起来数据需要用引号括起来，但简单地添加开始和结束引号并不能解决问题。

我似乎尝试了引号、转义和非转义 html 的所有组合，首先将数据存储在变量中，然后尝试注入它，但没有一个对我有用。

我犯了一个明显的错误吗？鉴于我当前的工具集，我更愿意解决这个问题。

Answer 1

尝试像这样加载您的模板：

<script>
var template = new EJS({url: '/TestButton.ejs'});
$('#listItem').click( function(){
     $('#display').html(template.render());
});
</script>