Knockout.js Text-Bindung - Mehrere Leerzeichen zusammengebrochen

Question

Es scheint, dass bei Verwendung der Textbindung von Knockout mehrere Leerzeichen zu einem zusammengefasst werden. Zum Beispiel:

Funktion VM() { this.Notes = ko.observable(); }

var vm = new VM();

ko.applyBindings(vm);

Hier ist ein Fiddle, um dies zu demonstrieren: http://jsfiddle.net/9rtL5/

Ich habe festgestellt, dass in jsfiddle die Leerzeichen in Firefox, Chrome und IE9 komprimiert werden. Seltsamerweise werden sie jedoch in meiner App von IE9 nicht komprimiert, sondern von den anderen.

Mein Verständnis ist, dass Knockout einen HTML-Textknoten verwendet, um den Wert zu rendern. Ich habe diese verwandte Frage dazu gefunden, wie Leerzeichen beim Erstellen eines Textknotens erhalten bleiben:

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

Sollte Knockout die Umwandlung von Leerzeichen angemessen handhaben? Ich möchte wirklich keinen benutzerdefinierten Bindungshandler dafür verwenden.

Ich bin tatsächlich im Kontext des Anzeigetexts innerhalb eines Select auf dieses Problem gestoßen und habe erst beim Debuggen dieses Problems entdeckt, dass es sich auch auf eine einfache Textbindung bezieht. Ich vermute, dass das Select-Problem dasselbe ist.

Answer 1

Was du beobachtest, ist ein normales Verhalten. Wenn es in bestimmten Elementen gerendert wird, wird der Leerzeichen beschnitten. Knockout sollte keine automatischen Ersetzungen durchführen. Wenn ich einen String mit führenden / nachgestellten Leerzeichen mit knockout an den Server senden möchte, sollten diese Leerzeichen auch dort ankommen.

Du solltest einen Binding-Handler erstellen, um die Leerzeichen durch Leerzeichen ohne Zeilenumbruch zu ersetzen, damit es so dargestellt werden kann.

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 });
    }
};

Demo