2

Knockoutのテキストバインディングを使用すると、複数のスペースが1つに折りたたまれるようになります。例えば：

<textarea data-bind="value: Notes"></textarea>
<p data-bind="text: Notes"></p>

function VM（）{this.Notes = ko.observable（）; }

var vm = new VM（）;

ko.applyBindings（vm）;

これを実証するためのフィドルは次のとおりです：http：//jsfiddle.net/9rtL5/

jsfiddleでは、Firefox、Chrome、IE9でスペースが圧縮されていることがわかりました。不思議なことに、私のアプリ内ではIE9はそれらを圧縮しませんが、他のものは圧縮します。

私の理解では、KnockoutはHTMLテキストノードを使用して値をレンダリングします。テキストノードを作成するときにスペースを保持することについて、この関連する質問を見つけました。

http://www.webdeveloper.com/forum/showthread.php?193107-RESOLVED-Insert-amp-nbsp-when-using-createTextNode%28%29

Knockoutは変換スペースを適切に処理する必要がありますか？これにカスタムバインディングハンドラーを使用したくありません。

私は実際にselect内の表示テキストのコンテキストでこれに遭遇し、その問題をデバッグしているときに、単純なテキストバインディングにも関連していることを発見しました。選択した問題は同じだと思います。

4

1 に答える 1

1

あなたが観察しているのは正常な行動です。特定の要素でレンダリングされると、空白がトリミングされます。ノックアウトは自動置換を行うべきではありません。ノックアウトを使用して先頭/末尾のスペースがあるサーバーに文字列を送信したい場合は、それらのスペースで文字列を送信する方が適切です。

スペースを改行なしスペースに置き換えるためのバインディングハンドラーを作成して、そのようにレンダリングできるようにする必要があります。

ko.bindingHandlers.spacedtext = {
    replaceSpace: function (str) {
        return new Array(str.length + 1).join('\xA0');
    },
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var spacedValue = ko.computed(function () {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                text = value && value.toString();
            return text && text.replace(/^\s+|\s+$/gm, ko.bindingHandlers.spacedtext.replaceSpace);
        });
        ko.applyBindingsToNode(element, { text: spacedValue });
    }
};

デモ

于 2012-11-16T04:10:31.747 に答える