Question

得到提示

附上此处的代码

<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>

但是，它不起作用。我在使用原生模板引擎时遇到了什么问题？提前谢谢。

Answer 1

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

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

我经常发现插件初始化周围的setTimeout会起作用，而且它在这里做了。

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

1 个答案: