2

このサンプルコードからヒントを得ました

ここにコードを添付

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

しかし、うまくいきません。ネイティブ テンプレート エンジンで何が間違っていますか? 前もって感謝します。

4

1 に答える 1

4

ここに機能するバージョンがあります: http://jsfiddle.net/NLGm8/32/

Knockout と jQuery の統合で最も厄介な点の 1 つは、プラグインが DOM 要素が存在することを期待するタイミングと、Knockout がそれらをレンダリングするタイミングです。

多くの場合、プラグインの初期化の前後で setTimeout がうまくいくことがわかりますが、ここではそうしました。

于 2012-09-04T10:37:33.570 に答える