18

KnockoutにViewModelがあり、これは主にマッピングプラグインから派生しています（つまり、動的に）。これは正常に機能します。ただし、クライアントは、サーバーに送信する前に、すべての入力の空白が削除されていることを確認するように求めています。明らかに、トリミングコードは非常に単純ですが、Knockoutは比較的新しいため、このコードをどこに配置するか正確にはわかりません。エクステンダーについて読みましたが、戻って各オブザーバブルに追加するには、かなり冗長で反復的なようです。さらに、動的に生成されたオブザーバブル（マッピングプラグイン）に対してそれを実行できるかどうかさえわかりません。

観察可能な変化のたびにトリミングコードを挿入できる、拡張/オーバーライドできる中心的なメカニズムはありますか？基本的に、必要がない場合は、すべてのフォームを調べてHTMLに特別なバインディング構文を追加するのに何時間も費やさないようにしています。

ありがとう。

4

6 に答える 6

20

私も同じ問題を抱えていました。trimmedバインディングを変更せずにビューモデルを呼び出すことができるように、拡張機能を作成しました。例えば：

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

拡張子:

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

コードは例とともにJSFiddleにあります。

于 2012-11-08T18:23:00.003 に答える
10

新しいバージョンの Knockout でこの問題が発生した場合に備えて、現在のトップ ランクの回答は正しく機能しません。

必要な変更を示す更新されたフィドルとコードを次に示します。

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

が必要な理由を誰かが知っている場合extendは、お知らせください。Knockout 3.1.0 で正しく動作しなかった理由を理解するのに永遠にかかりました

于 2014-08-22T20:21:56.100 に答える
4

オブザーバブルをトリミングするカスタム バインディングを作成できます。これに似たもの

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

于 2012-05-24T21:30:28.453 に答える
3

Joe のソリューションを出発点として使用し、少し異なる方法で実装しました。

知らせ：

  • のko.observable()括弧内は何もありません
  • 新しいtrimmed読み取り関数は単に戻りthis()、null または未定義の例外を取得しません。

モデルコード:

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

拡張子:

ko.subscribable.fn.trimmed = function() {
    return ko.computed({
        read: function() {
            return this();
        },
        write: function(value) {
            this(value.trim());
            this.valueHasMutated();
        },
        owner: this
    });
};
于 2014-07-01T17:23:36.890 に答える