是否有可能在html文档中的新标签中实例化html/js模板?

Is it possible to instantiate html/js template in a new tab inside a html document

本文关键字:html 实例化 js 模板 标签 有可能 文档 是否 新标签      更新时间:2023-09-26

我有一个html表,它正在做一些计算与一些jQuery/knockout.js背后。

我脑海中的原始大纲是将这个"内容"打包到一个模板中,并在load事件中加载它的一个实例。该实例将位于窗口内的一个简单的选项卡容器中。

当用户单击一个按钮时,应该使用该模板的另一个实例创建第二个选项卡。

如何才能最有效地做到这一点?特别是我如何将我唯一的html/js代码存储在可重用的模板中以实例化。

我想象一个片段,看起来像这样:

var tabCounter = 0;
var divID = "tabNr";
$("body").on("click","a.newTab",function(){
    tabCounter++; 
    var tabbedContent = $("<div class="tab" id="'" + divID + tabCounter + "'"></div>");
    tabbedContent.html('insert whole html block from template here which references the   knockout viewmodel --- how?');
    return false;
})

感谢您的帮助

我的方法是在视图模型中使用一个表示选项卡的observableArray。该数组中的每个对象表示每个选项卡中表的数据。

这个数组一开始可能只有一个元素,这可能会让你处于现在的情况。但如果只是向数组中添加一个元素,Knockout就可以呈现下一个选项卡所需的html。

因此,您可以避免通过jQuery将html字符串插入DOM,而这正是Knockout首先要做的。

注意:如果你正在使用JavaScript框架来增强你的选项卡,你可能需要一个自定义绑定来调用框架的方法。