Question

我正在努力让jquery手风琴中的活动面板。

给定等价的select元素：

<select data-bind="options: Tasks, optionsText: 'TaskName', value: SelectedTask"></select>

其中Tasks = ko.observableArray（）;通过db-call初始化。

我想要实现的是将SelectedTask设置为我的jQuery UI手风琴中的选定面板。

我的手风琴是由一个淘汰赛循环创造的：

<div id="accordion" data-bind="jqAccordion: { },template: { name: 'scene-template', foreach: Scenes, afterAdd: function(elem){$(elem).trigger('valueChanged');} }"></div>      

<script type="text/html" id="scene-template">
    <div data-bind="attr: {'id': 'Scene' + SceneId}" class="group">
        <h3>
            <b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName" /></b>                
        </h3>
        <p>
            Description:<textarea name="Description" data-bind="value: Description"></textarea>
        </p>
    </div>
</script>

模板中任何标题元素的数据绑定“SelectedTask”都失败了，让我觉得我必须在手风琴代码中执行此操作，例如在“click”事件中。我能够定义点击事件，但是如何将“SelectedTask”设置为已点击的项目？

Answer 1

如果您只关心将selectedTask设置为正在打开的折叠面板，请考虑jqAccordion上的beforeActivate事件处理程序。

如果手风琴当前已折叠，ui.oldHeader和ui.oldPanel将为空jQuery对象。如果手风琴折叠，ui.newHeader和ui.newPanel将是空的jQuery对象。

我不喜欢这种措辞，因为它有点令人困惑，但基本上，当面板即将展开时$(ui.newHeader)[0]是真正的，当面板即将崩溃时$(ui.oldHeader)[0]是真的。我们只关心设置是否即将展开（如果它即将崩溃，你可以将其设置为null，但这是一个偏好调用）。

因此，在您的CustomBinding中，将其添加到您的手风琴选项：

$(element).accordion({
    beforeActivate: function (event, ui) {
        if ($(ui.newHeader)[0]) {
            bindingContext.$root.SelectedTask(ko.contextFor($(ui.newHeader)[0]).$data);
            // I think this is equivalent to:
            // viewModel.SelectedTask(ko.contextFor($(ui.newHeader)[0]).$data);
        }
    }
});

如果有效，请告诉我。这是一种在黑暗中拍摄的（未经测试），但我认为应该这样。

在jquery手风琴中获得活跃的面板

1 个答案: