ブートストラップのドロップダウントグルとノックアウトバインドによる選択

Question

ボタンでプログラム的に選択範囲を選択したり、ページをロードする際のドロップダウン（以前の選択内容をクッキーに保存してある）に基づいて選択しようとしています。

次のコードを実行すると、ドロップダウンが表示され、クリックイベントと関連するコード/ページの変更を実行します。

$（ "。ドロップダウンメニュー"）。ドロップダウン（ "トグル"）;

どうすればいいですか？ノックアウトで

<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>

Answer 1

、あなたは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>