0

我正在努力在 jquery 手风琴中获得活动面板。

给定一个选择元素的等价物：

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

其中任务 = ko.observableArray(); 由 db-call 初始化。

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

我的手风琴是由淘汰赛循环创建的：

<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”数据绑定到模板中的任何标题元素都会失败，这让我觉得我必须在手风琴代码中执行此操作，例如在“单击”事件中。我可以定义点击事件，但是如何将“SelectedTask”设置为已点击的项目？

4

1 回答 1

1

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

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

我不喜欢这个措辞，因为它有点令人困惑，但基本上，$(ui.newHeader)[0]当面板即将展开$(ui.oldHeader)[0]时是真实的，而当面板即将折叠时是真实的。而且我们只关心设置 selected 如果它即将展开（如果它即将折叠，您可以将 selected 设置为 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);
        }
    }
});

让我知道这个是否奏效。这有点像在黑暗中拍摄（未经测试），但我认为应该这样做。

于 2013-09-16T22:42:15.203 回答