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>

验证无法正常工作，有时会提交表单并在出现错误时重新加载页面，有时错误消息仅针对一个输入显示，我的代码有什么问题？

4

2 回答 2

3

要获得更清洁的解决方案以及模型和视图之间更好的解耦，请查看 KO 验证库

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

编辑：要将它与映射插件一起使用，

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

您应该始终使用显式声明的视图模型，声明模型上的重要成员（从业务逻辑中使用的成员）仅用于表示的只读字段可以由映射插件声明，这样您的代码变得更容易理解和维护。

于 2012-12-22T12:50:47.983 回答
1

对于任何有兴趣的人。我没有为输入定义 html“名称”属性。在 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 回答