Question

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

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

显然每次我都包含这个按钮时，组件会执行ajax调用以获取它的值，这意味着对服务器有多个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);
    });
}

在同一组件的实例之间共享可观察对象

1 个答案: