使用节点 js 在 div 中追加 Ejs 模板文件答案

【问题标题】：Ejs template file append in div using node js使用节点 js 在 div 中追加 Ejs 模板文件
【发布时间】：2015-01-27 21:34:12
【问题描述】：

我有 2 个 ejs 文件。我需要根据标签点击附加模板。

这里我添加了 index.ejs 模板代码

<!--- Header content----->
<div class="btn-group filter-suggestions" data-toggle="buttons" style="margin-left:25px;">
    <label class="btn btn-default active" data-tab="tab1">
        <input type="radio"  name="suggest" value="1" />
        Tab1 </label>
    <label class="btn btn-default" data-tab="tab2">
        <input type="radio"  name="suggest" value="2" />
        Tab2 </label>
</div>
<div class="tabcontent"> TabContent</div>
<!-----------Content--------->
<!-----------Footer--------->

这里我添加了 tab1.ejs 模板代码

<div> Tab1 content</div>

这里我添加了 tab2.ejs 模板代码

<div> Tab2 content </div>

这里我添加标签点击事件的js代码。

$('.filter-suggestions label').on('click', function() {
//get the tab attribute type
var type = $(this).attr(tab);
if(type == tab1){
 var templatename = '/templates/Tab1.ejs'
} else {
 var templatename = '/templates/Tab1.ejs'
}
//here i replace the content based on the label
$ ('. tabcontent'). html (templatename);

});

它不工作。有任何想法使用节点 js 附加 ejs 模板吗？

【问题讨论】：

将它们包含在您的索引中并使用 js 显示/隐藏。

标签： javascript node.js ejs

【解决方案1】：

EJS 不以这种方式解析。您的代码当前的方式是将templatename 设置为'/templates/Tab1.ejs' 或'/templates/Tab2.ejs' 的字符串值 - 它不会读取您指定的.ejs 文件的内容。

解决此问题的更简单方法是加载两个选项卡并默认隐藏其中一个或两个选项卡，然后根据标签点击显示您想要的一个。

这里有一些可供尝试的替代代码：

// Hide the tabs
$('#idoftab1, #idoftab2).hide();

$('.filter-suggestions label').on('click', function() {
    //get the tab attribute type
    var type = $(this).attr(tab);

    if(type == tab1){
        $('#idoftab1').show();
    } else {
       $('#idoftab2').show();
    }
});

如果您正在寻找一种更加程序化的方式来通过客户端模板实现这一目标，那么您可以考虑使用 AngularJS 甚至像 ICanHaz 这样的库，但实际上，这种更改对于您想要实现的目标来说可能是矫枉过正。

【讨论】：