Question

我有大量的淘汰组件，目前正在使用KO.postbox进行通信。

我现在想要创建一个集中存储数据的中央服务提供者/ repository / singleton，并为所有这些组件提供初始化和api以及其他功能。

页面只有一个窗口/会话，但每个窗口都有3-7个Knockout组件，在某些情况下，页面上会多次加载相同的组件。结果是通过API加载数据的组件与需要相同数据的组件之间存在很多争议。

我目前的方法是使用单例模式（其他方法很乐意考虑）。唯一不可改变的要求是：

从一个中央＆＃34;存储库中存储和检索数据＆＃34;对于多个KO组件
写于ES2015，能够与Babel合作
可加载并可作为模块导出

当前代码的问题是

一个。这是由babel设定的，例如， this.instance = null引发错误，无法设置undefined实例。湾我不确定这是最好的方法还是我可以使它工作

代码在

const ko = require('knockout')
    , moment = require('moment')
    , postbox = require('knockout-postbox')
    , aja = require('aja');


const myServiceSingleton = () =>{ 

    this.instance = null;
    this.array1 = ko.observable([]);
    this.array2 = ko.observable([]);

    // revealing module pattern that handles initialization of our new singleton service provider
    const initializeNewModule = () => {

        const setArray1 = (array) => {
            console.info( 'Set Array1 Called' );
            this.array1(array);
        };

        const getArray1 = () => {
            console.info( 'Get Array1 Called' );
            return this.array1();
        };

        const setArray2 = (array) => {
            console.info( 'Set Array2 Called' );
            this.array2(array);
        };

        const getArray2 = () => {
            console.info( 'Get Array2 Called' );
            return this.array2();
        };

        const myAwesomeFunction = () => {
            // Perform some amazing computations on Array1 and Array 2
        };

        return {
            setArray1 : setArray1,
            getArray1 : getArray1,
            setArray2 : setArray2,
            getArray2 : getArray2,
            myAwesomeFunction : myAwesomeFunction
        };
    };

    // handles the prevention of additional instantiations
    const getInstance = () => {
        if( ! this.instance ) {
            this.instance = new initializeNewModule();
        }
        return this.instance;
    };

    return {
        getInstance : getInstance
    };

};
module.exports = myServiceSingleton;

--------- ---------- EDIT

希望这有助于其他人...

const ko = require('knockout')
    , moment = require('moment')
    , postbox = require('knockout-postbox')
    , aja = require('aja');

const array1 = ko.observable([]);
const array2 = ko.observable([]);
const secretFlag = ko.observable(false);

const myAmazingSingleton = {

    setArray1(newArray) {
        console.info( newArray);
        array1(newArray);
    },

    getArray1() {
        console.info( 'Get Array1 Called' );
        return array1();
    },

    getArray2() {
        return array2();
    },

    setArray2(newArray) {
        console.info('Set Array2 Called');
        array2(newArray);
    },

    getArray1Observable() {
        return array1 ;
    },

    myAwesomeFunction() {
        // Perform some amazing computations on Array1 and Array 2
        array1.map //etc etc
    }
};

export default myAmazingSingleton ;

使用非常简单：

import ArrayFunctions from 'myAmazingSingleton';
let array1 = ArrayFunctions.getArray1();

数据可在多个Knockout组件中使用

Answer 1

我认为您想要使用的单例是一个主视图模型，我的意思就是设置Knockout的常用方法。使用组件＆＃39; params从主视图模型传递组件需要共享的任何可观察对象。

Answer 2

您不能将箭头功能用作构造函数。你真的应该只使用一个简单的对象文字：

const myServiceSingleton = {
    array1: ko.observable([]),
    array2: ko.observable([]),
    setArray1(array) {
        console.info( 'Set Array1 Called' );
        this.array1(array);
    },
    getArray1() {
        console.info( 'Get Array1 Called' );
        return this.array1();
    },
    setArray2(array) {
        console.info( 'Set Array2 Called' );
        this.array2(array);
    },
    getArray2() {
        console.info( 'Get Array2 Called' );
        return this.array2();
    },
    myAwesomeFunction() {
        // Perform some amazing computations on Array1 and Array 2
    }
};

如果你坚持，你可以做一个

export function getInstance() {
    return myServiceSingleton;
}

甚至懒惰 - 初始化它，但通常你应该export default它。

用于Knockout.js组件的ES2015单例或服务提供程序或模块

2 个答案: