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

时间:2015-04-30 11:20:02

标签: javascript ajax asp.net-mvc-4 knockout.js

我正在使用knockoutJs 3.3.0。在我的应用程序中,我有一个通用的javascript文件,它在整个应用程序中被提到。除此之外,我将为每个页面提供单独的Js文件。

所以我有两个视图模型,一个是共同的,另一个是页面级viewModel页面一级视图模型。我的两个Js文件的所有功能都是ajax。

我需要在视图中绑定它们。

这是我的 Common ViewModel

"php function"

这是我的 PageLevel Js

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

我的观点我如何引用值,因为我需要来自两个ViewModel的所有值。

在我看来:

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

我怎样才能做到这一点..?

更新

这是我发现有用的链接。 multiple viewmodels communication

2 个答案:

答案 0 :(得分:0)

这是(恕我直言)不可能,只能将一个模型绑定到特定元素。

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

答案 1 :(得分:0)

您应该将两个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绑定无需修改即可运行,您可以通过App.pageVm属性访问特定于页面的VM。

我更喜欢这样,通常不是将每个VM绑定到不同的DOM节点(也是一个选项),因为通常一个节点可能嵌套在另一个节点内,这可能会使这个节点变得困难。