Fatal编程技术网

Knockout.js 敲除和jQuery验证

knockout.js

Knockout.js 敲除和jQuery验证,knockout.js,jquery-validate,knockout-mapping-plugin,knockout-2.0,Knockout.js,Jquery Validate,Knockout Mapping Plugin,Knockout 2.0,我在让KO和jQuery验证插件一起工作时遇到了一些问题 我的模型： Parameter { int Id; string Name; decimal Price; } 还有我的HTML+JS： <DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></met

我在让KO和jQuery验证插件一起工作时遇到了一些问题

我的模型：

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>


函数AdminViewModel（）{
var self=这个；
self.parameters=ko.observearray（）；
self.getParameters=函数（）{
//获取具有指定id（1）的元素的所有参数
$.getJSON（'http://localhost:81/api/parameters/1，函数（参数）{
fromJS（参数，{}，self.parameters）；
});
}
self.save=函数（）{
警报（‘提交’）；
}
}
jQuery（函数（$）{
var viewModel=新的AdminViewModel（）；
应用绑定（视图模型）；
viewModel.getParameters（）；
$（“#表单设置”）.validate（{submitHandler:viewModel.save}）；
});
参数

价格

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

欢迎有兴趣的朋友。 我没有为输入定义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 -->




参数

价格
任何感兴趣的人。 我没有为输入定义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 -->




参数

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

编辑：要将其与映射插件do一起使用

MyViewModel = function(data) {
   this.required = ko.observable().extend({ required: true});
   ko.mapping.fromJS(data, {}, this);
};
您应该始终使用显式声明的viewmodels，声明模型上的重要成员（从业务逻辑使用的成员）映射插件可以声明仅用于表示的只读字段，这样，您的代码就更容易理解和维护。

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

编辑：要将其与映射插件do一起使用

MyViewModel = function(data) {
   this.required = ko.observable().extend({ required: true});
   ko.mapping.fromJS(data, {}, this);
};
您应该始终使用显式声明的viewmodels，声明模型上的重要成员（从业务逻辑使用的成员）映射插件可以声明仅用于表示的只读字段，这样你的代码就更容易理解和维护了。

你能构造一个JSFIDLE演示吗？这里是FIDLE:，希望它有帮助，我不知道如何模拟服务器请求……你能构造一个JSFIDLE演示吗？这里是FIDLE:，希望它有帮助，我不知道如何模拟服务器请求……谢谢你的提示，但我不知道如何扩展映射对象（使用映射插件映射）：谢谢你的提示，但我不知道如何扩展映射对象（使用映射插件映射）：