Data binding 多视图模型绑定，带有绑定的共享错误对话框

我在一个页面上有两个视图模型，对应于不同选项卡上的两组不同内容

我将每个视图模型绑定到标记中对应的根元素。但是，我希望有一个通用的标记部分，任何一个模型都可以使用它（在我的场景中，母版页上的错误的通用模式对话框），它不包含在任何绑定的根元素中

我该怎么处理？我应该将多个模型嵌套在一个主视图模型或其他模型中，而不绑定到特定的元素吗？我是个新手，所以我愿意接受所有的建议

这显示了减去复制的模态部分后我试图完成的内容。小提琴：

JS:

HTML:

我是一个模式对话框，实际上只有在AJAX调用后服务器返回错误时才会显示






我是一个模式对话框，实际上只有在AJAX调用后服务器返回错误时才会显示

---

**编辑：基于以下答案和评论的工作示例：

我建议使用一个viewModel嵌套其他两个模型。您可能需要将错误传递给嵌套模型，以便它们可以与错误交互

我还建议对模型和新对象使用函数

这是一个精简版。我还没有测试它，所以可能有一些小错误：

var ViewModel = function() {
    var self = this;

    self.errors = new Errors();

    self.sectionOne = new SectionOneViewModel(self.errors);
    self.sectionTwo = new SectionTwoViewModel(self.errors);
};

var SectionOneViewModel = function(errors) {
    var self = this;

    self.sectionOne = ko.observable("section one");
    self.errors = errors;

    //this is how to add an error
    self.errors.add("This is an error");
};

var SectionTwoViewModel = function(errors) {
    var self = this;

    self.sectionTwo = ko.observable("section two");
    self.errors = errors;
};

var Errors = function() {
    ver self = this;

    self.errors = ko.observableArray();

    self.add = function (errorText) {
        self.errors.push(new Error(errorText));
    };

    self.clear = function() {
        self.errors.removeAll();
    };
};

var Error = function(errorText) {
    var self = this;

    self.errorText = errorText;
};

---

这看起来很有希望，我明天会测试一下。谢谢

<div id="section-one"> 
    <span data-bind="text: sectionOne"></span>
    <br />
    <input type="button" value="call section one function" data-bind="click: aSectionOneMethod" />
    <!-- This is a generic modal that all of my viewmodels use to show errors, I don't want to include it in every binding section -->
    <div id="generic-error-modal" data-bind="errorModal: errors">
        <p>I'm a modal dialog that would actually only display when an error is returned from the server after an AJAX call.</p>
        <ul data-bind="foreach: errors">
            <li data-bind="text: errorText"></li>
        </ul>
    </div>
</div>

<div id="section-two"> 
    <span data-bind="text: sectionTwo"></span>
    <br />
    <input type="button" value="call section two function" data-bind="click:             aSectionTwoMethod" />
    <!-- This is a generic modal that all of my viewmodels use to show errors, I don't want to include it in every binding section -->
    <div id="generic-error-modal" data-bind="errorModal: errors">
        <p>I'm a modal dialog that would actually only display when an error is returned from the server after an AJAX call.</p>
        <ul data-bind="foreach: errors">
            <li data-bind="text: errorText"></li>
        </ul>
    </div>
</div>

var ViewModel = function() {
    var self = this;

    self.errors = new Errors();

    self.sectionOne = new SectionOneViewModel(self.errors);
    self.sectionTwo = new SectionTwoViewModel(self.errors);
};

var SectionOneViewModel = function(errors) {
    var self = this;

    self.sectionOne = ko.observable("section one");
    self.errors = errors;

    //this is how to add an error
    self.errors.add("This is an error");
};

var SectionTwoViewModel = function(errors) {
    var self = this;

    self.sectionTwo = ko.observable("section two");
    self.errors = errors;
};

var Errors = function() {
    ver self = this;

    self.errors = ko.observableArray();

    self.add = function (errorText) {
        self.errors.push(new Error(errorText));
    };

    self.clear = function() {
        self.errors.removeAll();
    };
};

var Error = function(errorText) {
    var self = this;

    self.errorText = errorText;
};