Bootstrap下拉菜单 - 切换和选择与敲除绑定

我想在按钮中以编程方式选择选择以及下载加载页面（基于之前的选择保存到cookie）。Bootstrap下拉菜单 - 切换和选择与敲除绑定

当我做下面的代码时，它只显示下拉菜单，我想执行点击事件和相关的代码/页面更改。（“。dropdown-menu”）。dropdown（“toggle”）;

我该怎么做。

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

来源

2016-08-24 SA.

我不知道，但也许http://stackoverflow.com/questions/18623348/using-bootstrap-button-dropdowns-with-knockout会有帮助吗？ –

在淘汰赛中，你不与DOM拨弄。您建模您的应用程序状态并操作模型。敲除绑定负责更新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>

来源

2016-08-24 14:59:23

您可以回答以下问题 1.为什么使用语法 - > data-bind =“click：（）=> view（2）”和data-bind =有什么优势？“click：view（ 2）“ 2.你为什么使用setTimeout（（）=> vm.view（2），500）; –

1.单击绑定应采取一个功能，而不是代码片段。如果你使用'click：view（2）'，那将在启动时以及每次点击时执行...... 2.我使用'setTimeout'，以便你可以看到事物从初始状态改变。这纯粹是为了演示。 –

Bootstrap下拉菜单 - 切换和选择与敲除绑定

回答

相关问题