javascript - 使用JQuery将ejs模板注入(inject)html

Question

可以通过 JQuery 注入(inject)来自 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 模板，它就可以工作。
例如:

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

<小时/>

否则，当我尝试使用上面的示例代码加载页面时，这是我收到的错误:
“未捕获的语法错误:意外的标记<”，原始 html 如下所示:

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

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

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

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

Answer 1

尝试像这样加载模板:

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