2

ノックアウトを使用して html エディター/プレビューアーを作成しようとしています。次のように、単一のオブザーバブルを使用して簡単なテストを設定しました。

JS:

var ViewModel = function() {
    this.content = ko.observable("<div data-bind=\"text: 'testext'\"></div>");
};

ko.bindingHandlers.bindHTML = {
    'init': function () {
    },
    'update': function (element, valueAccessor) {                         
        ko.utils.setHtml(element, valueAccessor());
    }
}

ko.applyBindings(new ViewModel());

HTML: 

<input type="text" data-bind="value: content">

これは、ページが最初に読み込まれ、「testtext」を含む div が表示されたときに正常に動作するように見えますが、入力フィールドを <div data-bind=\"text: 'testext2'\"></div>バインディングのようなものに編集するとすぐに動作しません!

これはノックアウトの制限ですか、それとも何か間違っていますか? リバインドを実行する方法はありますか?

JSFiddle はこちらから入手できます: http://jsfiddle.net/Q9LAA/

4

2 に答える 2

4

自動的に html を挿入できるバインディングがありhtmlます (私は を使用するよりもこれを好むでしょうsetHtml) が、挿入された html のバインディングを評価しません。生成された html にバインディングを再適用する必要があります (それは、カスタムバインディングが必要です)。

ko.bindingHandlers.bindHTML = {
    init: function () {
        // we will handle the bindings of any descendants
        return { controlsDescendantBindings: true };
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        // must read the value so it will update on changes to the value
        var value = ko.utils.unwrapObservable(valueAccessor());
        // create the child html using the value
        ko.applyBindingsToNode(element, { html: value });
        // apply bindings on the created html
        ko.applyBindingsToDescendants(bindingContext, element);
    }
};

これは、その使用法を示す更新されたフィドルです。

于 2013-12-29T02:26:48.633 に答える