javascript - 挖空标签绑定(bind)

Question

我的 HTML 部分有 2 个选项卡。默认的一个正在工作，但是当我尝试切换另一个选项卡时，出现错误。任何人都可以帮助为什么？

HTML

<ul class="nav nav-tabs" data-bind="tabs: true" id="myTabs">
    <li class="active"><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="first">
        <div class="form-group">
            <label class="control-label"></label>
        </div>
    </div>
    <div class="tab-pane" id="second">
        <div class="form-group">
            <label class="control-label"></label>
        </div>
    </div>
</div>

JS

ko.bindingHandlers.tabs = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).find('a').click(function (e) {
            e.preventDefault();
            $(e.target).tab('show');
        });
    }
};

我收到错误:未捕获的类型错误:对象 [object Object] 没有方法 'tab'

Answer 1

你在使用 jquery-ui 标签吗？如果是这样，试试这个:HTML

<div data-bind="tabs: true" id="myTabs">
        <ul>
            <li class="active"><a href="#first">First</a></li>
            <li><a href="#second">Second</a></li>
        </ul>
        <div id="first">
            <div>
                aa
            </div>
        </div>
        <div id="second">
            <div>
                bb
            </div>
        </div>
    </div>

JS

ko.bindingHandlers.tabs = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).tabs();
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
          $(element).tabs("destroy");
        });
    }
};