twitter-bootstrap - ノックアウトコンポーネントが動的タブにバインドされていません

Question

最初のタブがすべてのステーションの概要を保持し、ステーションをクリックすると新しいタブが開き、ノックアウトコンポーネントが表示されるブートストラップタブを使用した簡単な例に取り組んでいます。動的タブではなく静的タブを使用すると、テンプレートが正常にレンダリングされます。

タブは正常に生成されますが、何らかの理由でノックアウトは何もしていません。コンポーネントをDOMに挿入する以外に、ノックアウトをトリガーするために何かをする必要がありますか?

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();