Question

我有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模板吗？

Answer 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之类的库，但实际上，这种更改可能对您想要实现的目标而言过于苛刻。

Ejs模板文件使用节点js附加在div中

1 个答案: