Découper automatiquement les espaces de toutes les valeurs observables

J'ai eu le même problème. J'ai écrit une prolongation de sorte que vous pouvez appeler trimmed de votre point de vue-modèle sans avoir à changer vos fixations. Par exemple:

var vm = {
    myValue: ko.observable('').trimmed()
}

L'extension:

ko.subscribable.fn.trimmed = function() {
    return ko.computed({
        read: function() {
            return this().trim();
        },
        write: function(value) {
            this(value.trim());
            this.valueHasMutated();
        },
        owner: this
    });
};

Code est sur JSFiddle avec des exemples.

Vous pourriez écrire une liaison personnalisée qui rogne l'observable. Quelque chose de semblable à ce

http://jsfiddle.net/belthasar/fRjdq/

Vous pouvez créer une liaison personnalisée qui appelle la value de liaison à l'interne, ou vous pouvez remplacer le value de liaison à l'auto-trim, avant de lie (non-recommandé).

L'idée de base:

• Intercepter le value liaison
• Envelopper le passé observable dans un computed
• Faire la liaison read et write de la calculés au lieu de partir de l'original observables
• Quand une nouvelle arrive, le découper avant de nous écrire
• Lorsque le modèle de changement de la valeur, du trim et mettre à jour les deux modèle & UI, si nécessaire

JS:

ko.bindingHandlers.trimmedValue = {
init: function(element, valueAccessor, allBindings) {
const ogValue = valueAccessor();
let newVa = valueAccessor;
//If this is a type="text" element and the data-bound value is observable,
//we create a new value accessor that returns an in-between layer to do
//our trimming
if (element.type === "text" && ko.isObservable(ogValue)) {
const trimmedValue = ko.observable().extend({"trim": true});
//Write to the model whenever we change
trimmedValue.subscribe(ogValue);
//Update when the model changes
ogValue.subscribe(trimmedValue);
//Initialize with model value
trimmedValue(ogValue());
//From now on, work with the trimmedValue 
newVa = () => trimmedValue;
}
//Note: you can also use `ko.applyBindingsToNode`
return ko.bindingHandlers.value.init(element, newVa, allBindings)
}
}
//Our observable to check our results with
var myObs = ko.observable("test ");
myObs.subscribe(function(newValue) {
console.log("Change: \"" + newValue + "\"");
});
//The extender that does the actual trim
ko.extenders.trim = function(target, option) {
return ko.computed({
read: target,
write: function(val) {
target(
val && typeof val.trim === "function"
? val.trim()
: val
);
//This makes sure the trimming always resets the input UI
if (val !== target.peek()) {
target.valueHasMutated();
}
}
}).extend({notify: "always"});
};
ko.applyBindings({
myObs: myObs
});

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h4><code>type="text" trimmedValue</code></h4>
<input type="text" data-bind="trimmedValue: myObs">

Si vous n'avez pas de soins sur certains inutiles valueHasMutateds dans votre modèle

La partie la plus délicate est de déterminer quelles mises à jour que vous souhaitez recevoir dans votre modèle... L'exemple ci-dessous va pas déclencher valueHasMutated ni muter votre modèle est observable. Cependant, si vous modifiez votre modèle de la valeur à un inculte de la chaîne, la liaison gestionnaire de réinitialiser instantanément. E. g.: myObs(" test ") va déclencher

1. Change: " test ", et
2. Change: "test"

Si vous avez seulement besoin de rognage de l'INTERFACE utilisateur pour le modèle, et ne me dérange pas de l'extra mises à jour, vous pouvez utiliser:

ko.bindingHandlers.value.init = function(element, valueAccessor, allBindings) {
const ogValue = valueAccessor();
const newVa = (element.type === "text" && ko.isObservable(ogValue))
? () => ogValue.extend({"trim": true})
: valueAccessor;
return ogValueInit(element, newVa, allBindings)
};

D'écraser la valeur par défaut value liaison

À utiliser ce comportement comme norme de comportement (pas recommandé), vous pouvez le faire:

const ogValueInit = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function( /*... */ ) {
//...
return ogValueInit( /* ... */);
};

JS:

const ogValueInit = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function(element, valueAccessor, allBindings) {
const ogValue = valueAccessor();
let newVa = valueAccessor;
//If this is a type="text" element and the data-bound value is observable,
//we create a new value accessor that returns an in-between layer to do
//our trimming
if (element.type === "text" && ko.isObservable(ogValue)) {
const trimmedValue = ko.observable().extend({"trim": true});
//Write to the model whenever we change
trimmedValue.subscribe(ogValue);
//Update when the model changes
ogValue.subscribe(trimmedValue);
//Initialize with model value
trimmedValue(ogValue());
//From now on, work with the trimmedValue 
newVa = () => trimmedValue;
}
return ogValueInit(element, newVa, allBindings)
};
//Our observable to check our results with
var myObs = ko.observable("test ");
myObs.subscribe(function(newValue) {
console.log("Change: \"" + newValue + "\"");
});
//The extender that does the actual trim
ko.extenders.trim = function(target, option) {
return ko.computed({
read: target,
write: function(val) {
target(
val && typeof val.trim === "function"
? val.trim()
: val
);
//This makes sure the trimming always resets the input UI
if (val !== target.peek()) {
target.valueHasMutated();
}
}
}).extend({notify: "always"});
};
ko.applyBindings({
myObs: myObs
});

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<h4><code>type="text" value</code></h4>
<input type="text" data-bind="value: myObs">