敲除组件未绑定在动态选项卡上

Question

我正在研究一个带有引导选项卡的简单示例，其中第一个选项卡将保存所有工作站的摘要，单击某个工作站将打开一个新选项卡并显示淘汰组件。当我使用静态选项卡但不在动态选项卡上时，它可以很好地渲染模板

它可以很好地生成选项卡，但由于某种原因，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();

Answer 1

感觉就像是在使用jquery接近Knockout解决方案。。。通常不是个好主意。。。

也许这可以让你走上正轨（打开下面的jsfiddle或尝试stackoverflow的新答案脚本运行程序：）-jsfiddle.n949kf03/4/

var vm = (function() {
  function tab(data, name, id) {
    return {
      id: id || name.replace(/ +?/g, ''),
      name: name,
      data: data
    };
  };
  var createNewTab = function() {
    var tl = tabArray().length;
    tabArray.push(new tab('amazing tab data: ' + tl, 'tab ' + tl));
  }
  // the following data is just  to fill out the tabs,
  // you would replace with var tabArray = ko.observableArray([]);
  // once you had everything working
  var tabArray = ko.observableArray([
    new tab('working', 'firstTab'),
    new tab('tab2', 'secondTab', 2),
    new tab('thirdTab', 'third')
  ]);
  return {
    tabs: tabArray,
    createNewTab: createNewTab
  };
})();
ko.applyBindings(vm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- List all of the tabs, this first tab definition is the home tab you talked 
     about where you would click to open the other stations -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <!-- ko template: { name: 'tab-definition-template', foreach: tabs } -->
  <!-- /ko -->
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
    This is your home tab with links to the other tabs :D
    <br/>
    <button class="btn btn-success" data-bind="click: createNewTab">new tab</button>
  </div>
  <!-- ko template: { name: 'tab-template', foreach: tabs } -->
  <!-- /ko -->
</div>
<script type="text/html" id="tab-definition-template">
  <li>
    <a role="tab" data-toggle="tab" data-bind="text: name, attr: {'href': ('#' + id)}"></a>
  </li>
</script>
<!-- this would work better as a component -->
<script type="text/html" id="tab-template">
  <div class="tab-pane" data-bind="text: data, attr: {'id': id}"></div>
</script>

我正在做的是创建两个模板定义，一个用于选项卡模板定义，另一个用于每个选项卡。为此，我使用了虚拟元素。

我说你选择使用组件可能对它添加的选项卡是正确的（因为它允许每个选项卡都有一个内部vm，这很好。