Question

这个小提琴将嵌套的jquery标签与jquery手风琴绑定到了淘汰赛。它表现得像预期的那样。

但是，如果我尝试在本地复制它，我会收到错误：

Uncaught Error: Unable to process binding "jqTabs: function (){return tabs }"
Message: cannot call methods on tabs prior to initialization; attempted to call method 'option'

这是HTML：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />  
</head>
<body>
<div data-bind="jqTabs: tabs">
    <ul>
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
    </ul>
    <div id="one">
        <div data-bind="jqTabs: tabs">
            <ul>
                <li><a href="#one">One</a></li>
                <li><a href="#two">Two</a></li>
            </ul>
            <div id="Div1">
                <div data-bind="with: items, accordion: {}">
                    <h3>
                        <a href="#">1</a>
                    </h3>
                    <div>    
                        <span data-bind="text: id"></span>
                    </div>
                    <h3>
                        <a href="#">2</a>
                    </h3>
                    <div>    
                        <span data-bind="text: name"></span>
                    </div>
                </div>
            </div>
            <div id="two">
                <h2>Two</h2>
            </div>

        </div>
    </div>
    <div id="Div2">
        <h2>Two</h2>
    </div>
</div>


<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script src="//localhost:65052/Content/js/knockout-3.2.0.js"></script></script>
<script type="text/javascript">
ko.bindingHandlers.jqTabs = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var dependency = ko.utils.unwrapObservable(valueAccessor()),
            currentIndex = $(element).tabs("option", "selected") || 0,
            config = ko.utils.unwrapObservable(allBindingsAccessor().jqTabOptions) || {};

        //make sure that elements are set from template before calling tabs API
        setTimeout(function () {
            $(element).tabs("destroy").tabs(config).tabs("option", "selected", currentIndex);
        }, 0);
    }
};

ko.bindingHandlers.accordion = {
    init: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        setTimeout(function () {
            $(element).accordion(options);
        }, 0);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).accordion("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).accordion("destroy").accordion(options);
    }
};

function Tab(id, title, content) {
    this.id = ko.observable(id);
    this.title = ko.observable(title);
    this.content = ko.observable(content);
}

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
}

function ViewModel() {
    var self = this;
    self.tabs = ko.observableArray([new Tab(1, "one", "one content"), new Tab(2, "two", "two content"), new Tab(3, "three", "three content")]);
    self.items = ko.observable(new Item(1, "one"));
}

ko.applyBindings(new ViewModel());
</script>
</body>
</html>

Answer 1

您似乎在本地使用的版本不同于jquery ui（1.8.5或＆gt; = 1.9）的小提琴，它不允许在构建小部件之前调用小部件的功能。

您需要使用以下命令验证小部件是否已构建：

$(element).is(':ui-tabs')标签
$(element).is(':ui-accordion') for accordion

使用jquery ui版本1.11.1查看working fiddle。

- Throwing error when a method is not found ticket -

初始化之前无法在选项卡上调用方法;试图调用方法＆＃39;选项＆＃39; - 昏死

1 个答案: