使用敲除将多个视图模型绑定到同一个 HTML 页面

Question

我正在使用 MVC4 和淘汰赛构建一个演示应用程序。我在数据库中有以下表格

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。任何关于如何创建 2 个单独的视图模型并绑定它们的指导将不胜感激。谢谢大家。

Answer 1

请记住，ViewModel 包含提供视图所需的数据和逻辑，它可以是基础模型的任意组合，可以以任何所需的方式进行塑造。这是 MVVM 的优势之一，它提供了一种让 UI 使用数据非常简单的方法。

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

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>

我确实建议访问淘汰赛网站上的教程和示例以获取更多信息。