1

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

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

1 回答 1

0

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

也许这可以让您走上正轨（打开以下 jsfiddle 或尝试使用 stackoverflow 的新答案脚本运行程序 :)） - jsfiddle.net/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>

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

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

于 2014-10-12T21:43:26.173 回答