Я пытался интегрировать нокаут и аккордеон JQuery UI, а затем складной аккордеон Bootstrap. В обоих случаях это сработало, но я обнаружил, что мне пришлось реализовать несколько обходных путей, чтобы все отображалось правильно, особенно при динамическом добавлении элементов с помощью нокаута. Упомянутые виджеты не всегда осведомлены о том, что происходит с нокаутом, и что-то может испортиться (неверно рассчитаны высоты div и т. Д.). Особенно с аккордеоном JQuery он имеет тенденцию переписывать html по своему усмотрению, что может быть настоящей болью.
Итак, я решил создать свой собственный виджет аккордеона, используя основные JQuery и Knockout. Взгляните на этот рабочий пример: http://jsfiddle.net/matt_friedman/KXgPN/
Конечно, используя разную разметку и CSS, это можно настроить на все, что вам нужно.
Приятно то, что он полностью управляется данными и не делает никаких предположений о компоновке, вне зависимости от того, какой CSS вы решите использовать. Вы заметите, что разметка очень проста. Это всего лишь пример. Это должно быть настроено.
Markup:
<div data-bind="foreach:groups" id="menu">
<div class="header" data-bind="text:name, accordion: openState, click: toggle"> </div>
<div class="items" data-bind="foreach:items">
<div data-bind="text:name"> </div>
</div>
</div>
Javascript:
ko.bindingHandlers.accordion = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).next().hide();
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var slideUpTime = 300;
var slideDownTime = 400;
var openState = ko.utils.unwrapObservable(valueAccessor());
var focussed = openState.focussed;
var shouldOpen = openState.shouldOpen;
/*
* This following says that if this group is the one that has
* been clicked upon (gains focus) find the other groups and
* set them to unfocussed and close them.
*/
if (focussed) {
var clickedGroup = viewModel;
$.each(bindingContext.$root.groups(), function (idx, group) {
if (clickedGroup != group) {
group.openState({focussed: false, shouldOpen: false});
}
});
}
var dropDown = $(element).next();
if (focussed && shouldOpen) {
dropDown.slideDown(slideDownTime);
} else if (focussed && !shouldOpen) {
dropDown.slideUp(slideUpTime);
} else if (!focussed && !shouldOpen) {
dropDown.slideUp(slideUpTime);
}
}
};
function ViewModel() {
var self = this;
self.groups = ko.observableArray([]);
function Group(id, name) {
var self = this;
self.id = id;
self.name = name;
self.openState = ko.observable({focussed: false, shouldOpen: false});
self.items = ko.observableArray([]);
self.toggle = function (group, event) {
var shouldOpen = group.openState().shouldOpen;
self.openState({focussed: true, shouldOpen: !shouldOpen});
}
}
function Item(id, name) {
var self = this;
self.id = id;
self.name = name;
}
var g1 = new Group(1, "Group 1");
var g2 = new Group(2, "Group 2");
var g3 = new Group(3, "Group 3");
g1.items.push(new Item(1, "Item 1"));
g1.items.push(new Item(2, "Item 2"));
g2.items.push(new Item(3, "Item 3"));
g2.items.push(new Item(4, "Item 4"));
g2.items.push(new Item(5, "Item 5"));
g3.items.push(new Item(6, "Item 6"));
self.groups.push(g1);
self.groups.push(g2);
self.groups.push(g3);
}
ko.applyBindings(new ViewModel());