使用knockout将多个viewmodel绑定到同一个HTML页面

Question

我正在使用MVC4和knockout构建一个Demo应用程序。我在DB中有以下表格

Create Table Provider
(
[ProviderId] [int] IDENTITY(1,1) Primary Key NOT NULL,
[FirstName] [varchar](40) NOT NULL,
[LastName] [varchar](40) NOT NULL,
[SSN] [varchar](15) NOT NULL,
[NPI] [varchar](15) NOT NULL,
[ProviderStatus] [bit] NOT NULL,
)

Create table ProviderDetails
(
[ProviderDetailsID] [int] IDENTITY(1,1) Primary Key NOT NULL,
[Certification] [varchar](40) NOT NULL,
[Specialization] [varchar](40) NOT NULL,
[TaxonomyCode] [varchar](40) NOT NULL,
[ContactNumber] [varchar](15) NOT NULL,
[ContactEmail] [varchar](40) NOT NULL,
[ProviderId] [int] FOREIGN KEY REFERENCES Provider(ProviderId) Not NULL
)

实体如下（这些不是从DB生成的。我没有使用EF）。请指出错误，如果有的话。我对这里的列表有疑问。

public class Provider
{
    public int ProviderId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string SSN { get; set; }
    public string NPI { get; set; }
    public List<ProviderDetails> ProviderDetailsList { get; set; }
}
 public class ProviderDetails
{
    public int ProviderDetailsID { get; set; }
    public string Certification { get; set; }
    public string Specialization { get; set; }
    public string TaxonomyCode { get; set; }
    public string ContactNumber { get; set; }
    public string ContactEmail { get; set; }
    public int ProviderId { get; set; }
    public Provider Provider { get; set; }
}

我的HTML页面是

  <div class="container">
    <h1 class="col-sm-offset-3">Enter Provider Details:</h1>
    <br />
    <form class="form-horizontal" role="form" id="providerDetailsForm" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">First Name:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the First Name" id="firstName" data-bind="value: firstName, event: { keypress: allowOnlyAlphabets }" name="firstName" maxlength="20">
                <span class="col-sm-4 error"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Specialization:</label>
            <div class="col-sm-6">
                <select class="form-control" id="specialization" name="specialization" data-bind="value: specialization, options: specializationArray, optionsCaption: 'Select a Specialization'">
                </select>
            </div>
        </div>
       <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Contact Number:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value: contactNumber, event: { keypress: allowOnlyNumbers, blur: function () { formatPhoneNumber(contactNumber); changeContactNumberValidationRules() } }" name="contactNumber" placeholder="Enter the Contact Number" id="contactNumber" maxlength="13" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Email Address:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="contactEmail" data-bind="value: contactEmail" placeholder="Enter your email address" id="contactEmail">
            </div>
        </div>
    </form>
</div>

这里的绑定来自之前的单一视图模型。但是现在，我想我必须为2个实体创建2个视图模型。我已经读过主视图模型，但我不确定如何实现它与我的演示有关应用程序或甚至需要实现masterviewmodel.Any指导如何创建2个单独的视图模型并绑定相同的将非常感谢。谢谢大家。

Answer 1

请记住，ViewModel包含提供视图所需的数据和逻辑，它可以是底层模型的任意组合，以任何所需的方式进行整形。 这是MVVM的优点之一，它提供了一种非常简单的方式使UI消耗数据。

Knockout每个视图绑定一个ViewModel。 这个ViewModel可以根据需要简单或复杂。 它可以包含任意数量的子ViewModel，作为属性或数组。 在像您这样的情况下，如果我们假设ProviderDetails确实是子ViewModel的列表，我们可以创建一个Provider ViewModel，它具有自己的属性并包含一个可观察的ProviderDetails ViewModels数组。 一个简化的例子......

providerViewModel = function () {
    var self = this;
    this.firstName = ko.observable("");
    this.providerId = ko.observable();
    this.providerDetails = ko.observableArray();
}

providerDetailsViewModel = function()
{
    var self = this;
    this.certification = ko.observable("");
    this.taxonomyCode = ko.observable("");
}

然后你的标记看起来像这样，使用foreach绑定来显示productDetails模型。 您将在foreach绑定中看到对子ViewModel的绑定更改的上下文。 您只需直接引用其属性即可。

 <div class="container">
        <h1 class="col-sm-offset-3">Enter Provider Details:</h1>
        <br />
    <form class="form-horizontal" role="form" id="providerDetailsForm" method="post">
            <div class="form-group">
                <label class="col-sm-2 control-label labelfont">First Name:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="Enter the First Name" id="firstName" data-bind="value: firstName">
                </div>
            </div>
<!-- the foreach binding for the child view models -->
     <div class="row" data-bind="foreach: providerDetails">
            <div class="form-group">
                <label class="col-sm-2 control-label labelfont">Certification:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="Enter the Certification" id="certification" data-bind="value: certification">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label labelfont">Taxonomy:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="Enter the Taxonomy" id="taxonomy" data-bind="value: taxonomy">
                </div>
            </div>
     </div>
 <!-- end of the foreach binding for the child view models -->
</div>
</div>

我建议点击淘宝网站上的教程和示例以获取更多信息。