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下拉菜單 - 切換和選擇與敲除綁定

回答

相關問題