C# 使用knockout将多个viewmodels绑定到同一HTML页面

我正在使用MVC4和knockout构建一个演示应用程序

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>

---

这里的绑定来自以前的单视图模型。但是现在，我想我必须为这两个实体创建两个视图模型。我读过主视图模型，但我不确定如何在我的演示应用程序中实现它，或者是否需要实现主视图模型。请提供有关如何创建两个单独的视图模型并将其绑定的任何指导。谢谢各位。

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

敲除每个视图绑定一个ViewModel。此ViewModel可以是简单的，也可以是复杂的。它可以包含任意数量的子视图模型，可以作为属性或数组。在像您这样的情况下，如果我们假设ProviderDetails确实是子ViewModels的列表，那么我们可以创建一个具有自己属性并包含ProviderDetails ViewModels的可观察数组的ProviderViewModel。一个简化的例子

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>

---

我建议点击淘汰网站上的教程和示例了解更多信息。

提供商和提供商详细信息之间是否存在一对多关系？否，这是一对一，这就是为什么我对列表有疑问的原因。任何原因当时它们不在同一个表中？它们之前在同一个表中。有一个表提供程序。然后有一个要求在应用程序中的两个表之间具有父子关系。这就是为什么我更改了它。在这种情况下有点无用，但它仍然有效。将产品模型设为主视图模型，将ProductDetails设为产品模型上的属性，然后绑定产品模型。然后可以在细节上使用Knockout的foreach绑定。我有一个与此无关的问题，我只是想知道，对于两个单独的视图使用一个viewmodel是否正常。有人建议我们对所有视图使用相同的viewmodel。这是标准做法吗？这是一对一关系，因此，该列表是一个错误的选择。两个实体是否都可能有一个单一的视图模型。那么绑定将如何工作。抱歉，如果这是一个noob问题。如果两个单独的视图需要相同的视图模型-是-他们可以使用它。如前所述，viewModel可以包含所需的任何内容，以任何形状支持视图，因此，如果是两个实体，则可以。