Question

我在使用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>

验证工作不正常，如果有错误，有时会提交表单并重新加载页面，有时只为一个输入显示错误消息，我的代码出了什么问题？

Answer 1

要获得更清晰的解决方案并更好地在模型和视图之间解耦，请查看KO验证库

https://github.com/ericmbarnard/Knockout-Validation

编辑：将它用于映射插件do，

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

你应该总是使用显式声明的viewmodels，声明模型上的重要成员（从业务逻辑中使用的那些）只能用于表示的只读字段可以由映射插件声明，这样你的代码就会得到更容易理解和维护。

Answer 2

对任何有兴趣的人。我没有定义html＆＃34; name＆＃34;输入属性。在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 -->

Knockout和jQuery验证

2 个答案: