bootstrap 的默认选项卡 + 敲除 js 代码

Question

我不明白为什么这里的默认选项卡是参数，而不是车辆。启动时 - 参数正在打开，尽管我明确指出

self.curTab = ko.observable ("车辆");

function WebmailViewModel() {
    var self = this;
    self.curTab = ko.observable("vehicle");
  
  self.setCurTab = (curTab) => {
        self.curTab(curTab);
    }
}

ko.applyBindings(new WebmailViewModel());

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul class="nav nav-tabs nav-justified mb-3" role="tablist" >
                    <li>
                      <a data-bind="click: setCurTab('vehicle'), css: {active: curTab() == 'vehicle'}" >Vehicle</a>
                    </li>
                    <li>
                      <a data-bind="click: setCurTab('parameters'), css: {active: curTab() == 'parameters'}">Parameters</a>
                    </li>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" data-bind="css: {active: curTab() == 'vehicle'}">Vehicle data</div>
    <div role="tabpanel" class="tab-pane" data-bind="css: {active: curTab() == 'parameters'}">Parameters data</div>
  </div>
  </ul>

Answer 1

经典的淘汰赛怪癖。这是因为点击绑定需要一个函数reference。当您说：click: setCurTab('parameters') 时，该函数实际上是在运行时执行的。将当前选项卡设置为 'parameters'，因为这是执行的最后一个函数调用。

您可以这样做：click: function () { setCurTab('vehicle') }，或者如果您不喜欢匿名函数使您的模板混乱，则使用 bind：click: setCurTab.bind($data, 'vehicle').

bootstrap 的默认选项卡 + 敲除 js 代码

Default tab for bootstrap + knockout js code

javascript

knockout.js

bootstrap-4