Tasks = ko.observableArray(); が入力されたこのjquery UIアコーディオンを持っています。タスクは、選択したプロジェクトによって異なります (次のコードには含まれていません)。新しいプロジェクトを選択するたびに、データベースへの ajax 呼び出しによってタスクのリストが更新されます。次のコードは、新しいプロジェクトが選択された後もすべてのデータを提供しますが、私の動作 (設定) を制御することはできません。
これは私の HTML w ノックアウトです:
<div id="accordion" data-bind="jqAccordion:{},template: {name: 'task-template',foreach: Tasks,afteradd: function(elem){$(elem).trigger('valueChanged');}}"></div>
<script type="text/html" id="task-template">
<div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
<h3><b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName /></b></h3>
<p>
<label for="Description" >Description:</label><textarea name="Description" data-bind="value: Description"></textarea>
</p>
</div>
</script>
そしてアコーディオンスクリプト:
<script>
$(function () {
$("#accordion")
.accordion({
header: "> div > h3"
, collapsible: true
, active: false
, heightStyle: "content"
})
.sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
var items = [];
ui.item.siblings().andSelf().each(function () {
//compare data('index') and the real index
if ($(this).data('index') != $(this).index()) {
items.push(this.id);
}
});
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
if (items.length) $("#sekvens3").text(items.join(','));
ui.item.parent().trigger('stop');
}
})
.on('stop', function () {
$(this).siblings().andSelf().each(function (i) {
$(this).data('index', i);
});
})
.trigger('stop', function () {
alert("triggered");
})
};
});
</script>
これはバインディングです:
ko.bindingHandlers.jqAccordion = {
init: function(element, valueAccessor) {
var options = valueAccessor();
$(element).accordion(options);
$(element).bind("valueChanged",function(){
ko.bindingHandlers.jqAccordion.update(element,valueAccessor);
});
},
update: function(element,valueAccessor) {
var options = valueAccessor();
$(element).accordion('destroy').accordion(options);
}
};
配列と値は問題なく更新されますが、アコーディオンを折りたたむことができず、collapsible-option が機能していません。どうにかしてオプション (ヘッダー、折りたたみ可能、アクティブなど) をバインディング関数に渡す必要があるように思えますが、どうすればよいでしょうか?