javascript - Knockout JS 如何从第二个视图模型/绑定访问值

Question

我是 Knockout JS 的新手，我认为它很棒。文档很棒，但我似乎无法用它来解决我当前的问题。

我的代码摘要

我有两个由两个 js 脚本表示的视图模型。它们统一在一个父 js 文件中。保存按钮的事件在两个 foreach 活页夹之外。我可以将所有数据保存在 foreach 的详细信息中。

我的问题

我需要能够将联系人 foreach 活页夹中的值与详细信息 foreach 活页夹中的值一起包含在内。

我试过的

我已经尝试从父视图模型的两个视图模型中访问数据，并从那里向控制器发送 POST 请求，但 observableArrays 显示未定义。

Create.CSHTML（使用 MVC5 无剃刀）

     <div id="container1" data-bind="foreach: contacts">
        <input type="text" data-bind="value: contactname" />
     </div>
     <div data-bind="foreach: details" class="card-body">
        <input type="text" data-bind="value: itemValue" />
     </div>
      The save is outside of both foreach binders
      <div class="card-footer">
        <button type="button" data-bind="click: $root.save" class="btn 
           btn-success">Send Notification</button>
      </div>

<script src="~/Scripts/ViewScripts/ParentVM.js" type="text/javascript"></script>
<script src="~/Scripts/ViewScripts/ViewModel1.js" type="text/javascript"></script>
<script src="~/Scripts/ViewScripts/ViewModel2.js" type="text/javascript"></script>

视图模型1

    var ViewModel1 = function (contacts) {
        var self = this;
    
        self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) {
            return {
                contactName: contact.contactName
            };
        }));
    }

视图模型2

    var ViewModel2 = function (details) {
        var self = this;
       self.details = ko.observableArray(ko.utils.arrayMap(details, function (detail) {
            return {
                itemNumber: detail.itemValue
           };
        }));
    }

self.save = function () {
 
        $.ajax({
            url: baseURI,
            type: "POST",
            data: ko.toJSON(self.details),
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                console.log(data);
                window.location.href = "/Home/Create/";
            },
            error: function (error) {
                console.log(error);
                window.location.href = "/Homel/Create/";
            }
        });
    };

父视图模型

var VM1;
var VM2;

var initialContactInfo = [
    {
        contactPhone: ""
    }
]

var initialForm = [
  {
     itemValue: ""
   ]
}

    $(document).ready(function () {
    
        if ($.isEmptyObject(VM1)) {
            ArnMasterData = new ViewModel1(initialContactInfo);
            ko.applyBindings(VM1, document.getElementById("container1"));
        }
    
        if ($.isEmptyObject(VM2)) {
            VM2 = new ViewModel2(initialForm);
            ko.applyBindings(VM2, document.getElementById("container2"));
        }
    });

标签： javascripthtmlknockout.js