Bootstrap 下拉切换和带有敲除绑定的选择

Question

我正在尝试以编程方式在按钮中选择选项以及加载页面时的下拉菜单（基于之前保存到 cookie 的选项）。

当我执行以下代码时，它只显示下拉菜单，我想执行点击事件和相关的代码/页面更改。

$(".dropdown-menu").dropdown("toggle");

我该怎么做。

    <div class="btn-group"  >
	  <button type="button" id="activeGrouping" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		  <span data-bind="if: view()==1">No grouping</span>
		  <span data-bind="if: view()==2">Group by subject</span>
		  &nbsp;
		  <span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu">
		<li><a href="#" id="groupBySubject" data-bind="click: $root.toggleView(2)">Group by subject</a></li>
		<li><a href="#" id="noGrouping" data-bind="click: $root.toggleView(1)">No grouping</a></li>
	  </ul>
</div>

Answer 1

在 Knockout 中，您不必摆弄 DOM。您对应用程序状态进行建模并操作模型。 Knockout 绑定负责更新 UI。

要更改选择的项目，您只需设置绑定变量 (view)。在示例中，下拉列表会从没有值开始，然后会被赋予我们想要的值。

vm = {
  view: ko.observable()
};

ko.applyBindings(vm);

// Simulating fetching from cookie and setting
setTimeout(() => vm.view(2), 500);

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<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="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button type="button" id="activeGrouping" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span data-bind="if: view()==1">No grouping</span>
    <span data-bind="if: view()==2">Group by subject</span>
    &nbsp;
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" id="groupBySubject" data-bind="click: () => view(2)">Group by subject</a>
    </li>
    <li><a href="#" id="noGrouping" data-bind="click: () => view(1)">No grouping</a>
    </li>
  </ul>
</div>