Twitter bootstrap 剔除组件未绑定到动态选项卡上

我正在处理一个简单的示例，其中第一个选项卡将包含所有站点的摘要，单击一个站点将打开一个新选项卡并显示淘汰组件。当我使用静态选项卡而不是动态选项卡时，它可以很好地呈现模板

它很好地生成了标签，但是出于某种原因，Knockout什么也不做，除了将组件注入DOM之外，我还需要做些什么来触发Knockout吗

function addNewTab(p) {
    var ary = p.split(',');
    var id = ary[0];
    var name = ary[1];
    //LoadDetails(id);
    var nextTab = $('#tabs li').size() + 1;
    $('<li><a href="#tab' + nextTab + '" data-toggle="tab">' + name + '</a><span class="glyphicon glyphicon-remove"></span></li>').appendTo('#tabs');
    $('<div class="tab-pane" id="tab' + nextTab + '"><tab-details params = "id: '+id+'"></tab-details></div>').appendTo('.tab-content');
    $('#tabs a:last').tab('show');
}


ko.components.register('tab-details', {
    template: '<div data-bind="html: brief"></div>',
    viewModel: function (params) {
        var self = this;
        self.brief = ko.observable('Hello World');
        var url = "http://localhost:3000/stationapi?id=" + params.id;
        $.getJSON(url, function (data) {
            self.brief(data.stations.content.brief);
        }); 
    } 
});
ko.applyBindings();

函数addNewTab（p）{
var ary=p.split（'，'）；
var-id=ary[0]；
var name=ary[1]；
//装载详细信息（id）；
var nextTab=$（'#tabs li'）.size（）+1；
$（“
”）。附加到（“#制表符”）；
$（''）.appendTo（'.tab内容'）；
$（#制表符a:last'）。制表符（'show'）；
}
ko.组件.寄存器（'tab-details'{
模板：“”，
viewModel:函数（参数）{
var self=这个；
self.brief=ko.observable（'Hello World'）；
变量url=”http://localhost:3000/stationapi?id=“+参数id；
$.getJSON（url、函数（数据）{
自我简介（数据、站点、内容、简介）；
}); 
} 
});
ko.applyBindings（）；

感觉您正在使用jquery接近一个淘汰方案。。。通常不是个好主意

也许这可以让您走上正确的道路（或者打开下面的JSFIDLE，或者尝试stackoverflow新的in-answer脚本运行程序：）-

var vm=（函数（）{
功能选项卡（数据、名称、id）{
返回{
id:id | | name.replace（/+？/g'），
姓名:姓名,，
数据：数据
};
};
var createNewTab=函数（）{
var tl=tabArray（）.length；
push（新标签（'惊人的标签数据：'+tl，'标签'+tl））；
}
//以下数据仅用于填写选项卡，
//您将替换为var tabArray=ko.observearray（[]）；
//一旦一切正常
var tabArray=ko.observableArray([
新选项卡（“工作”、“第一个选项卡”），
新选项卡（'tab2'，'secondTab'，2），
新选项卡（'thirdTab'，'third'）
]);
返回{
tabs:tabArray，
createNewTab:createNewTab
};
})();
ko.应用绑定（vm）





这是您的主页选项卡，包含指向其他选项卡的链接：D


新标签页


我试图通过将ko.applyBindings（）移动到addNewTab进行破解，然后我得到了一个未捕获的语法错误：无法解析绑定。绑定值：id:542e3206647fcbc00fa327c9消息：意外令牌非法顺便说一下，如果要打开新选项卡，只需使用旧代码：$（“#选项卡a:last”）。选项卡（'show'）；只需为我的代码更新选择器或查看更新的JSFIDLE：我不打算使用敲除，因为选项卡将是只读的。淘汰赛改变了我的计划。我喜欢你的建议，并打算采纳它。谢谢。没问题，仅供参考，knockout不必用作动态绑定库，它仍然是一种很好的、干净的、可维护的填充静态模板的方法。一旦您为实际选项卡创建了一个组件（不是定义所有选项卡及其链接的类似标题的东西），只需用您的组件替换即可，这样，每个选项卡都将有一个VM（关注点分离），而且您的VM/模板也将从该页面分离。