Bootstrap dropdown-toggle and selection with knockout binding

Question

Я пытаюсь выбрать программный выбор в кнопке, а также выпадающее меню при загрузке страницы (на основе предыдущего выбора, сохраненного в файле cookie).

Когда я делаю приведенный ниже код, он просто показывает выпадающее меню, я хочу выполнить событие click и связанные с ним изменения кода/страницы.

$ ("раскрывающееся меню"). Раскрывающийся список ("переключение");

Как это сделать.

<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

В Knockout, вы не возиться с DOM. Вы моделируете состояние своего приложения и манипулируете моделью. Связывание нокаутов заботится об обновлении пользовательского интерфейса.

Чтобы изменить тот элемент, вы просто установите граничную переменную (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>