Question

所以，我的应用程序中有2个C＃实体。我计划使用相同的knockout viewmodel将这2个实体绑定到视图。模型如下

public class Provider
{
    public int ProviderID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public ProviderDetails ProviderDetails { 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 int ProviderId { get; set; }
}

我有以下HTML

 <body>
  <div class="container">
       <h1 class="col-sm-offset-3">Enter Provider Details:</h1>
    <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, @*hasFocus: setTheFocusaAfterReset*@ 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">Last Name:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the Last Name" id="lastName" name="lastName" data-bind="value: lastName, event: { keypress: allowOnlyAlphabets }" maxlength="20">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Certification:</label>
            <div class="col-sm-6">
                <select class="form-control" id="certification" name="certification" data-bind="value: certification, options: certificationArray, optionsCaption: 'Select a Certification'">
                </select>
            </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">Taxonomy Code:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Taxonomy code" id="taxonomyCode" name="taxonomyCode" data-bind="textInput: taxonomyCode" readonly>
            </div>
        </div>
    </form>
</div>
</body>

这里的淘汰绑定是当有单个实体Provider时。我必须拆分实体以显示DB中表之间的父子关系。这种关系是一对一的。我正在考虑创建一个像这样的单一视图模型。

var ProviderViewModel
{
      var self = this;
      self.providerID = ko.observable("");
      self.firstName = ko.observable("");
      self.lastName = ko.observable("");
     //This is where I am facing difficulty.How do I include the  Providerdetails within this viewmodel.
}

现在，我像这样单独提供Providerdetails的代码

   self.specializationArray = ko.observableArray([]);
    self.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
    self.certification = ko.observable("");
    self.specialization = ko.observable("");

但是如何将它包含在同一个viewmodel中。我有点困惑。请指导我正确的方向。

用于创建的MVC控制器代码。

    [HttpPost]
    public ActionResult CreateProvider(Provider provider)
    {
        try
        {
            int providerCreationSuccessful = _repository.CreateProvider(provider);
            if (providerCreationSuccessful == 1)
                TempData["userIntimation"] = "Provider Registered Successfully";

            return RedirectToAction("ShowTheListOfProviders");
        }
        catch (Exception Ex)
        {
            _logger.Error(Ex.Message);
            return View("Error");
        }

    }

Answer 1

为什么不为每个人制作一个属性：

var ProviderViewModel = function(){
    //these 2 can be observable if needed
    this.provider = new Provider();
    this.details = new ProviderDetails();
};     
var Provider = function(){
    var self = this;
    self.providerID = ko.observable("");
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
};
var ProviderDetails = function(){
    self.specializationArray = ko.observableArray([]);
    self.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
    self.certification = ko.observable("");
    self.specialization = ko.observable("");
};

然后在您的HTML中，您可以通过Provider

这种方式进行绑定

<input type="text" class="form-control" placeholder="Enter the Last Name" id="lastName" name="lastName" data-bind="value: provider.lastName, event: { keypress: allowOnlyAlphabets }" maxlength="20">

使用ProviderDetails的详细信息成员：

<select class="form-control" id="certification" name="certification" data-bind="value: details.certification, options: details.certificationArray, optionsCaption: 'Select a Certification'">
 </select>

Answer 2

您可以像以下一样创建第一个视图模型：

var ProviderViewModel = function()
{
    var self = this;
    self.providerID = ko.observable("");
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
}

然后初始化此视图模型：

var vm = new ProviderViewModel();

然后您使用vm变量代替self来应用其余属性：

vm.specializationArray = ko.observableArray([]);
vm.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
vm.certification = ko.observable("");
vm.specialization = ko.observable("");

然后你绑定你的模型：

ko.applyBindings(vm);

为knockout中的单独实体创建单个viewmodel

2 个答案: