1

KO と jQuery Validate プラグインを連携させるのに問題があります。

私のモデル:

Parameter {
    int Id;
    string Name;
    decimal Price;
}

そして私のHTML + JS：

<DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
        <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
        <script type='text/javascript' src='js/jquery.validate.min.js'></script>
        <script type='text/javascript' src='js/knockout-2.2.0.js'></script>
        <script type='text/javascript' src='js/knockout.mapping-latest.js'></script>
    </head>
    <script type="text/javascript">
        function AdminViewModel() {

                var self = this;
                self.parameters = ko.observableArray();

                self.getParameters = function() {
                    // gets all parameters for the element with specified id (1)
                    $.getJSON('http://localhost:81/api/parameters/1', function(parameters){
                    ko.mapping.fromJS(parameters, {}, self.parameters);
                });
            }

            self.save = function() {
                alert('Submit!');
            }
        }

        jQuery(function( $ ) {

            var viewModel = new AdminViewModel();

            ko.applyBindings(viewModel);

            viewModel.getParameters();

            $("#form-settings").validate({ submitHandler: viewModel.save });
        });
    </script>
    <body>
        <form id="form-settings" action="javascript:void(0);">
            <!-- ko foreach: parameters() -->
            <!--<p data-bind="foreach: parameters()">-->
                Parameter <input class="required" type="text" data-bind="value: $data.Name" /><br />
                Price <input class="required number" type="text" data-bind="value: $data.Price" /><br />
            <!--</p>-->
            <!-- /ko -->
            <button type="submit">Save</button>
        </form>
    </body>
</html>

検証が正しく機能していません。エラーがあると、フォームが送信されてページがリロードされることがあります。1 つの入力に対してのみエラー メッセージが表示されることがあります。コードの何が問題なのですか?

4

2 に答える 2

3

よりクリーンなソリューションと、モデルとビューの間のより良い分離については、KO 検証ライブラリをチェックしてください。

https://github.com/ericmbarnard/Knockout-検証

編集: マッピング プラグインで使用するには、

MyViewModel = function(data) {
   this.required = ko.observable().extend({ required: true});
   ko.mapping.fromJS(data, {}, this);
};

明示的に宣言されたビューモデルを常に使用し、モデルで重要なメンバー (ビジネス ロジックから使用されるもの) を宣言する必要があります。プレゼンテーションにのみ使用される読み取り専用フィールドは、マッピング プラグインによって宣言できます。このようにして、コードははるかに簡単になります。理解し維持する。

于 2012-12-22T12:50:47.983 に答える
1

興味のある方へ。入力用のhtml「name」プロパティを定義していませんでした。foreach 内では、変数名ではなく一意の名前を定義する必要があります。これは、jQuery がそれを使用してエラー ラベルを添付するためです。

<!-- ko if: parameters() -->
    <p data-bind="foreach: parameters()">
        Parameter <input class="required" name="" type="text" data-bind="value: $data.Name, attr: { name: 'parameter_' + $index() }" /><br />
        Price <input class="required number" name="" type="text" data-bind="value:     $data.Price, attr: { name: 'price_' + $index() }" /><br />
    </p>
<!-- /ko -->
于 2012-12-22T10:31:54.193 に答える