2

データをサーバーに保存/送信する前に、ビューモデルから直接jquery検証を呼び出すなど、ビュー情報を持たないビューモデルを作成しようとしています。

var vm = function () {
    var self = this;

    self.password = ko.observable();
    self.save = function (form) {
       // I want to prevent any view information call directly from view model.
       if ($(form).isValid()) {
          // $.ajax({});
       }
    };
};
ko.applyBindings(new vm());

@using (Html.BeginForm(null, null, FormMethod.Post, new { data_bind = "submit: save" }))

また、ノックアウト検証をビュー モデルで手動で再作成したくありません。これは、asp.mvc データ注釈によって jquery 検証属性として生成されているためです。

[Required]
[StringLength(100, ErrorMessageResourceName = "ErrorMinStringLength", ErrorMessageResourceType = typeof(Locale), MinimumLength = 6)]
[DataType(DataType.Password)]
public string Password { get; set; }

@Html.PasswordFor(m => m.Password, new { data_bind = "value: Password" })

// Generated html in the browser view source.
<input type="password" name="Password" id="Password" data-val-required="The Password field is required." data-val-length-min="6" data-val-length-max="100" data-val-length="The Password must be at least 6 characters long." data-val="true" data-bind="value: Password">

次のように有効なステータスを更新する単純なカスタム バインディングを作成しました。

ko.bindingHandlers.jQueryIsValid = {
    init: function (element, valueAccessor) {
        $(element).closest("form").change(function () {
            var observable = valueAccessor();
            var isValid = $(element).valid();
            observable(isValid);
        });
    }
};

次に、html とビュー モデルを次のように更新します。

@using (Html.BeginForm(null, null, FormMethod.Post, new { data_bind = "submit: save, jQueryIsValid: isValid" }))

var vm = function () {
    var self = this;

    self.password = ko.observable();
    self.isValid = ko.observable();
    self.save = function () {
       if (self.isValid()) {
          // $.ajax({});
       }
    };
};
ko.applyBindings(new vm());

私のポイントは、ビューモデルが理想的にはビューに関する知識を持たないはずの mvvm パターンを適用することです ($(form).dosomething など)。上記の解決策が最善の方法であるかどうかはわかりません。私はノックアウトが初めてなので、カスタムバインディングや既存のノックアウト機能について見逃しているかもしれません。

誰かがそれを行うための正しい/最良の方法を示すことができますか?

4

1 に答える 1

1

カスタム バインディングは不要です。ビューモデルは、フォームの有効性を認識する必要はありません。ポイントはsave、有効なフォームでのみ呼び出す必要があるということです。また、送信動作を AJAX 呼び出しに置き換える予定であるため、送信ボタンをクリックしたときにフォームがポストバックされないようにする必要があります。

これは次のように達成できます...

$('form').submit(function(e){
    if ($(this).valid()) {
        viewModel.save();
        e.preventDefault();
    }
});
于 2013-11-05T15:20:27.310 に答える