Binding Multiple viewmodels to the same HTML page using knockout

Question

I am building a Demo applications using MVC4 and knockout.I have the following Tables in the 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
)

The entities are as follows (These are not generated from the DB.I am not using EF).Please point out mistakes if there are any.I have my doubts regarding Lists here.

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; }
}

MY HTML page is

  <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>

The bindings here are from a previous single view model.But now,I am thinking I have to create 2 viewmodels for the 2 entities.I had read of a master view model but i am unsure of how to implement it with regards to my demo application or even if there is a need to implement a masterviewmodel.Any guidance on how to create 2 separate viewmodels and bind the same would be really appreciated.Thanks folks.

Answer 1

Remember that a ViewModel contains the data and logic needed to supply the view, it can be any combination of underlying models, shaped in any way that is needed. That is one of the advantages to MVVM, it provides a way to make consumption of the data by the UI very straightforward.

Knockout binds one ViewModel per view. This ViewModel can be as simple or as complicated as necessary. It can contain any number of child ViewModels, either as properties or arrays. In a case like yours, if we pretend that the ProviderDetails is truly a list of child ViewModels, we can create a Provider ViewModel that has its own properties and contains an observable array of ProviderDetails ViewModels. A simplified example...

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("");
}

Then your markup would look something like this, using the foreach binding to display the productDetails models. You will see the context of the binding changes to the child ViewModel within the foreach binding. You just refer to its properties directly.

 <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>

I do suggest hitting the tutorials and examples on the knockout site for more information.