跨同一组件的实例共享可观察对象

Question

我有一个下拉菜单组件（实际上是一个 bootstrap 按钮菜单）。 'dropdown' 通过对服务器执行 AJAX 调用并解析 JSON 字符串来获取它的值。

我在页面的多个位置都需要这个按钮，但是我每次都需要组件的新实例，因为我必须传入调用视图模型以向其添加一些数据。

显然，每次我包含此按钮时，组件都会执行 ajax 调用以获取其值，这意味着对服务器有 n 次 AJAX 调用。无论如何我可以只做一个 Ajax 调用并将它传播到组件的每个实例吗？

按钮组件

        function AddElement(params) {
        this.options = ko.observableArray();
        var self = this;
        var section = params.section;

            $.getJSON("http://localhost:8080/test", function (data) {
                elementOptions = data;
                self.options(data);
            });

            this.addElement = function (data) {
                section.formElements.push(data);
            };

    }

所以问题是我怎样才能实现这个或者有没有更好的方法在 KO 中实现这种功能（即不是组件）

谢谢

大卫

Answer 1

选项 1：在组件的某个公共父级中加载并传入可观察数组。

function AddElement(params) {
    var self = this,
        section = params.section,
        options = params.options;
}

选项 2：将加载程序对象传递给您的组件。

function AddElement(params) {
    var self = this,
        section = params.section,
        loader = params.loader; //All 'AddElement' components get passed the same instance of the loader

    this.options = ko.observableArray();
    loader.load(function (data) { //The loader is responsible for doing the AJAX once and only once.
        elementOptions = data;
        self.options(data);
    });
}

跨同一组件的实例共享可观察对象

Sharing observable across instances of the same component

knockout.js