Question

我正在研究一个带引导选项卡的简单示例，其中第一个选项卡将保存所有工作站的摘要，单击工作站将打开一个新选项卡并显示knockout-component。当我使用静态选项卡而不是动态选项卡时，它正在渲染模板。

它生成标签很好但是由于某种原因Knockout什么都不做，除了将组件注入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();

Answer 1

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

也许这可以让你走上正轨（或者打开下面的jsfiddle或尝试使用stackoverflow＆＃39的新的回答脚本运行程序:)） - jsfiddle.net/n949kf03/4/

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Ide表示你选择使用组件可能对它添加的标签是正确的（因为它允许每个标签的内部vm很好！）但是对于这个例子我只是想创建一些东西供你使用当你真的应该使用淘汰赛时，将比使用jquery操纵dom更好地分配。

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

1 个答案: