具有查询 UI 折叠项的自定义绑定的选项设置

Option setting with custom binding for query UI accordion

本文关键字：自定义 绑定 选项 设置 查询 UI 折叠      更新时间：2023-09-26

我有这个jquery UI手风琴，它填充了Tasks = ko.observableArray（）;任务取决于选定的项目（未包含在以下代码中）。每当我选择一个新项目时，任务列表都会通过对数据库的 ajax 调用来更新。以下代码提供了所有数据，也是在选择新项目之后，但我无法控制我的 ACCORDING 的行为（设置）。

这是我的 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);
    }
};

数组和值正常且已更新，但手风琴无法折叠，可折叠选项不起作用。在我看来，我应该以某种方式将选项（标题、可折叠、活动等）传递到绑定函数中，但是如何传递？

您已经在绑定处理程序初始化函数中将绑定选项传递给手风琴插件

var options = valueAccessor();
$(element).accordion(options);
因此，传递

到绑定中的任何参数都将传递给手风琴插件

<div id="accordion" data-bind="jqAccordion: { 
                               header: "> div > h3",
                               collapsible: true,
                               active: false,
                               heightStyle: "content"
                            }"></div>

您还可以考虑向 init 函数添加逻辑以适应默认值，这样您就不必每次都传递每个参数（警告：下面的示例代码不是跨浏览器的）

var options = valueAccessor();
options.collapsible = options.collapsible === undefined ? true : options.collapsible; 
options.active = options.active === undefined ? false : options.active;
$(element).accordion(options);
相关文章：