bootstrap + knockout js 代码的默认选项卡

Posted 2023-03-27

【中文标题】bootstrap + knockout js 代码的默认选项卡

【英文标题】：Default tab for bootstrap + knockout js code

【发布时间】：2021-12-25 19:10:08

【问题描述】：

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

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

你可以在这里运行它http://jsfiddle.net/56gh1vpk/3/

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>

【参考方案1】：

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

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

【讨论】：

太棒了！感谢您的帮助！