jQuery bootstrap 选项卡模板追加

Question

我正在尝试根据按钮点击动态添加 bootstrap 选项卡。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
</script>
</head>
<body>

<script id="tabTemplate" type="text/x-jquery-tmpl"> 
    <div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>
</script>

<a href="#" id="btnAdd"><i class="icon-plus-sign-alt"></i> Add Tab</a>

<ul class="nav nav-tabs" id="tabs">
    <li class="active"><a href="#tab1">Tab 1</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">Hello tab #1 content...</div>
</div>

<script>
$(document).ready(function() {

$('#btnAdd').click(function (e) {
    e.preventDefault();
    var nextTab = $('#tabs li').size()+1;

    // create the tab
    $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('#tabs');

    // create the tab content
    $('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');

    // make the new tab active
    $('#tabs a:last').tab('show');
});

});

我正在尝试将“// 创建选项卡内容”放入模板中，但仍然有选项卡 ID 增量。

这是一个fiddle

有人可以帮忙吗？我似乎无法使用模板让它工作，并且需要选项卡来容纳更多信息。

Answer 1

我成功了，看到这个 fiddle

我需要使用模板传递 javascript variable/value：

$.tmpl( tabTemplate, { "device" : nextTab }).appendTo('.tab-content');

并在我的模板中引用它：

<script id="tabTemplate" type="text/x-jquery-tmpl"> 
    <div class='tab-pane' id='tab${device}'>${device}</div>
</script>

希望这对某人有所帮助。

jQuery bootstrap 选项卡模板追加

jQuery bootstrap tabs template append

jquery

templates

twitter-bootstrap