0

我一直致力于在 durandal 框架中使用 KnockoutJS 动态绑定嵌套手风琴的元素，其中每个元素都被路由到填充页面右侧内容的路径。

我遇到的问题是点击每个元素时手风琴的不断闪烁（重新绘制整个手风琴）。

我尝试添加<!DOCTYPE...>其中一个论坛中提到的内容，但这似乎不起作用。我还尝试了其他替代方法，例如 using.show()等display:none。

有人可以帮忙吗？

这是代码：

调用小部件的 html：

<section id="settings-view" class="view">
    <div class="row-fluid">
        <div class="span3">
            <div id="accordion">
            <div data-bind="widget: { kind: 'accordionMenu', menuItems: menuItems, routes: routes }" ></div>
            </div>
            <div class="span9">
            <div data-bind="compose: activeItem" />
        </div>
    </div>
   </div>
</section>

js伴随：

var menuItem = function (text, route, subMenuItems) {
            var self = this;
            self.text = text;
            self.route = route;
            self.subMenuItems = subMenuItems;
        }

  // nested menuitem definition

        return {
            title: 'newSettings',
            router: router,
            routes: routes,
            activate: activate,
            activeItem: activeItem,
            isActive: isActive,
            menuItems: menuItems,
            accordion: ko.bindingHandlers.accordion = {
                init: function (element, valueAccessor) {
                    var options = valueAccessor() || {};
                    setTimeout(function () {
                        $(element).accordion(options);
                    }, 0);

                },
                update: function (element, valueAccessor) {
                    var options = valueAccessor() || {};
                    if (typeof $(element).data("ui-accordion") != "undefined") {
                        $(element).accordion("destroy").accordion(options);
                    }

                }
            }
          };

小部件定义：

<div class="accordion">
    <div data-bind="foreach: settings.menuItems, accordion: {animate: {}, collapsible: true, alwaysOpen: true, heightStyle: 'content', header: 'h5'}">

        <!-- ko ifnot: subMenuItems -->
                  <p><a class="link" data-bind="attr: { href: route }, text: text"></a></p>
          <!-- /ko -->

        <!-- ko if: subMenuItems-->

        <h5 class="accordion-heading hidden" data-bind="css: { hidden: false }">
            <div class="accordion-toggle " data-bind="text: text" style="font-size: 1.25em; padding: 0; padding-left: 2%;"></div>
        </h5>
        <div class="accordion-group ">
            <div class="accordion-inner accordion-body" style="padding: 3%;">

                <p data-bind="widget: { kind: 'accordionMenu', menuItems: subMenuItems}"></p>
            </div>
        </div>
        <!-- /ko -->
    </div>

</div>

请让我知道可以做些什么。

4

0 回答 0