I can't understand why the default tab here is parameters, not vehicle. On startup - the parameters is opening, although I explicitly indicate
self.curTab = ko.observable ("vehicle");
You can run it here 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>Classic Knockout quirk. It's because the click binding needs a function reference. When you say: click: setCurTab('parameters'), that function is actually executed on runtime. Setting the current tab to 'parameters' as that is the last function call executed.
You can either do this: click: function () { setCurTab('vehicle') }, or use bind if you don't like anonymous functions cluttering up your templates: click: setCurTab.bind($data, 'vehicle').