1

ノックアウト ビュー モデルのデータから動的なポップオーバーを作成しようとしています。配列内の各項目のテンプレートをロードするカスタム バインディング ハンドラーの作成に取り組んでいます。

これが私のバインディングハンドラーの始まりです。

ko.bindingHandlers.notificationsPopover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        console.log('init called');
    },

    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        console.log('update called');
        console.log(value);

        var notifications = $("<div>");

        $.each(value, function () {
            console.log(ko.toJS(this));
            var data = this;
            var elm = $("<div>");

            ko.renderTemplate('Notification', data, {
                afterRender: function (nodes) {
                    notifications.append(elm.html());
                    console.log("Called");
                }
            }, elm.get(0), "replaceChildren");
        });

        var options = {
            title: 'Notifications',
            html: true,
            content: "'" + notifications.html() + "'",            
            placement: 'bottom'
        };
        $(element).popover(options);
        console.log(notifications.html());
    }
};

コンソールで、更新プログラムが 2 回呼び出されていることがわかります。1 回目はデータなしで、2 回目はこの要素がバインドされている配列にデータがロードされたときです。私の afterRender は一度だけ呼び出され、その時点で notifications.html() には以下が含まれているように見えます:

<div class="infuser-loading">Loading...</div>

私のテンプレートは次のようになります。

<div class="row-fluid">
    <div class="span3">
        <img data-bind="attr: { src: senderphoto(), alt: sendername() }" />
    </div>
    <div class="span9">
        <p data-bind="html: message()"></p>
    </div>
</div>

これを取得して、配列内の各項目のテンプレートをロードし、それらのテンプレートを連結してポップオーバーのコンテンツとして使用するにはどうすればよいですか?

4

0 に答える 0