在MVC4视图中使用KnockOut JS绑定两个ViewModels

Question

我正在使用淘汰赛3.3.0。 在我的应用程序中，我有通用的javascript文件，该文件遍历整个应用程序。 除此之外，我将为每个页面创建单独的Js文件。

因此，我有两种视图模型，一种是通用的，另一种是页面级的viewModel页面级的一种视图模型。 我的两个Js文件的所有功能都是ajax。

我需要将它们绑定。

这是我的常用ViewModel

var App = function () {
    var self = {}; 
    self.FP = ko.observable($("#fpTag").val());
    self.UserName = ko.observable($("#StoreValues").val());
    self.Enterprise = ko.observable($("#fpIdentifier").val());
    self.UpdateFP = function () {
        $.ajax({
            url: "/Home/createDeal",
            type: "POST",
            data: { tag: self.FP() },
            success: function (data) {
                self.FpData($.parseJSON(data));
                //return result;
            },
            error: function (data) {
                //return result;
            }
        });
    }
return self;
}
ko.applyBindings(new App());

这是我的PageLevel Js

var Discovery = function() {
var self = {};
var application = new App();
self.KeyWords = ko.observable();
self.GetSearchKeywords = ko.computed(function () {
    var data = application.FpData();
    if (data != null) {
        $.ajax({
            url: "/Home/GetSearchKeywords",
            type: "POST",
            data: { tag: application.UserName(), EnterpriseId: application.Enterprise(), StoreType: "SINGLE", offset: 1 },
            success: function (res) {
                self.KeyWords($.parseJSON(res));
            },
            error: function (res) {
            }
        });
    }
});
return self;};ko.applyBindings(new Discovery());

我的视图如何引用值，因为我需要两个ViewModels中的所有值。

在我看来：

<tbody data-bind="foreach: $root.KeyWords()">
    <tr>
        <td data-bind="text: keyword"></td>
        <td data-bind="text: App().FormatDate(createdOn)"></td>
        <td data-bind="text: ip"></td>
    </tr>
</tbody>
<input data-bind="value: App().FP()"/>

我该如何实现..？

UPDATE

这是我发现有用的链接。 多视图模型通信

Answer 1

（IMHO）这是不可能的，一个人只能将一个模型绑定到特定元素。

我将尝试使一个模型对象成为另一个模型对象的属性。

Answer 2

您应该将两个viewModel一起“合成”：

JS：

var App = function (pageVm) {
    var self = {}; 
    if (typeof pageVm !== 'undefined') {
        self.pageVm = pageVm;
    }
    self.FP = ko.observable($("#fpTag").val());
    self.UserName = ko.observable($("#StoreValues").val());
    self.Enterprise = ko.observable($("#fpIdentifier").val());
    self.UpdateFP = function () {
        $.ajax({
            url: "/Home/createDeal",
            type: "POST",
            data: { tag: self.FP() },
            success: function (data) {
                self.FpData($.parseJSON(data));
                //return result;
            },
            error: function (data) {
                //return result;
            }
        });
    }
return self;
}
var pageVm = new Discovery();
ko.applyBindings(new App(pageVm));

现在，您的应用程序绑定无需修改即可工作，并且您可以通过App.pageVm属性访问特定于页面的VM。

通常，我更喜欢这样做，而不是将每个VM绑定到不同的DOM节点（也是一个选择），因为通常一个节点可能嵌套在另一个节点内，这可能会增加难度。