jquery-ui - 如何使用 knockout.js 添加和删除 jqueryui 选项卡

Question

我从 this sample codes 得到提示

这里附上代码

<button id='add'>add</button>

<div data-bind="template: 'tabsTmpl'"></div>
<script id="tabsTmpl" type="text/html">
    <div data-bind="jqTabs: { fx: { } }">
        <ul>
            {{each tabs}}
            <li>
                <a href="#tab-${id}">${id}</a>
            </li>
            {{/each}}
        </ul>
        {{each tabs}}
        <div id="tab-${id}" >${id}</div>
        {{/each}}
    </div>
</script>
<script>
        ko.bindingHandlers.jqTabs = {
            init: function (element, valueAccessor) {
                var options = valueAccessor() || {};
                $(element).tabs(options);
            }
        };

        function TabItem(id) {
            this.id = ko.observable(id);
        }

        var viewModel = {
            tabs: ko.observableArray([new TabItem(1), new TabItem(2), new TabItem(3)])
        };


        $(function () {
            ko.applyBindings(viewModel);

            $('#add').click(function () {
                viewModel.tabs.push(new TabItem(viewModel.tabs().length + 1));
            });
        });
    </script>

上述代码的作者使用了jquery模板引擎，但我想使用knockout.js的原生模板引擎，所以我更改了html代码如下:

<div>
    <div data-bind="jqTabs: { fx: { } }">
        <ul data-bind="foreach: tabs">
            <li>
                <a data-bind="attr:{href:'#tab-' + id()}, text:id"></a>
            </li>
        </ul>
        <!-- ko foreach: tabs -->
        <div data-bind="attr:{id:'tab-'+id()}, text:id"></div>
        <!-- /ko -->
    </div>
</div>

但是，它不起作用。 我对 native 模板引擎做错了什么？ 提前致谢。

Answer 1

这是一个正常运行的版本:http://jsfiddle.net/NLGm8/32/

Knockout 与 jQuery 集成最棘手的事情之一是插件期望 DOM 元素出现的时间以及 Knockout 渲染它们的时间。

我经常发现围绕插件初始化的 setTimeout 可以解决问题，这里也做到了。