Knockout.js 将服务器模型呈现为带有验证的ko模型时需要的建议

我有一个表单需要升级以使用ko和ko验证。html字段如下所示。我还有一个表示页面的C MVC模型，即firstname、lastname和email等。。我正在寻求正确处理视图模型和验证的最佳方法。。另一个问题是，我希望视图模型被分成不同的部分来表示页面，尽管服务器模型是一个大模型

欢迎任何建议。 非常感谢,

HTML元素

我希望视图模型看起来基本上类似于以下内容，但这是一种好方法/可能吗？谢谢

viewModel = (function() {
    var section1 = (function() {
        return {
          firstname: ko.observable(),
          lastname: ko.observable()
    });

    var section2 = (function() {
        return {
          email: ko.observable()
    });

});

更新

可能是这样的

$(function() {

    my.viewModel = function() {
        var section1 = {
            firstname: ko.observable('hello'),
            lastname: ko.observable('there')
        },
        section2 = {
            email: ko.observable('aa@bb.com')
        });
        return {
            section1: section1,
            section2: section2
        };
    }();

    ko.applyBindings(new my.viewModel());

});

更新

我想就是这样

---

这就是我提出的在不同部分上进行验证的方法，在部分顶部显示错误。这只是演示了使用淘汰验证插件进行客户端验证。您还需要使用验证属性对服务器端模型进行验证，以确保始终验证数据

html:

---

为什么要将视图模型分为两个部分？好的。您正在尝试像在视图中一样对viewmodel建模。您不需要将节添加到ViewModel中我需要验证不同的节，如Concertina当前有哪些服务器端验证？您是否在模型上使用验证属性？你能解释一下这两个部分之间的验证是如何不同的吗。通常，您只需对每个字段进行验证，而不需要不同的部分。我想切换协奏曲中的部分是否“有效”。。内联验证没有问题。。

<script>
  var serverModel = { FirstName: 'aaa', Lastname: 'bbb', Email: 'a@b.com'};
</script>

viewModel = ko.mapping.fromJS(serverModel);

viewModel = (function() {
    var section1 = (function() {
        return {
          firstname: ko.observable(),
          lastname: ko.observable()
    });

    var section2 = (function() {
        return {
          email: ko.observable()
    });

});

$(function() {

    my.viewModel = function() {
        var section1 = {
            firstname: ko.observable('hello'),
            lastname: ko.observable('there')
        },
        section2 = {
            email: ko.observable('aa@bb.com')
        });
        return {
            section1: section1,
            section2: section2
        };
    }();

    ko.applyBindings(new my.viewModel());

});

<div data-bind="validationOptions: { insertMessages: false }">
    <div id="section1" data-bind="with: section1">
        <div class="validationElement" data-bind="visible: !isValid()">
            <p data-bind="validationMessage: firstName"></p>
            <p data-bind="validationMessage: lastName"></p>
        </div>
        <input data-bind="value: firstName" />
        <input data-bind="value: lastName" />
    </div>
    <div id="section2" data-bind="with: section2">
        <div class="validationElement" data-bind="visible: !isValid()">
            <p data-bind="validationMessage: email"></p>
        </div>
        <input data-bind="value: email" />
    </div>
</div>

var viewModel;

$(function () {
    var modelFromServer = {
        firstName: 'John',
        lastName: 'Jones',
        email: 'john.jones@gmail.com'
    };

    viewModel = new ViewModel(modelFromServer);
    ko.applyBindings(viewModel); 
});

var ViewModel = function(model) {
    var self = this;

    //using validatedObservable here so I can do isValid on each section
    this.section1 = ko.validatedObservable(new Section1(model));
    this.section2 = ko.validatedObservable(new Section2(model));
};

var Section1 = function(model) {
    var self = this;

    //just have basic required and length validation here
    self.firstName = ko.observable(model.firstName).extend({ 
        required: {message: 'Please enter a first name'},
        maxLength: {params: 20, message: 'Please enter a valid first name'}
        });

    //just have basic required and length validation here
    self.lastName = ko.observable(model.lastName).extend({ 
        required: { message: 'Please enter a last name'},
        maxLength: { params: 20, message: 'Please enter a valid last name' }
        });
};

var Section2 = function(model) {
    var self = this;

    //using email validation here
    self.email = ko.observable(model.email).extend({ 
        required: { message: 'Please enter an email address' },
        email: { message: 'Please enter a valid email address' }
        });
}