时间戳

首页 > 解决方案 > 在应用程序启动之前加载 json 文件并将其保存在全局变量 mithrilJs 中

javascript - 在应用程序启动之前加载 json 文件并将其保存在全局变量 mithrilJs 中

问题描述

我想在启动之前将 JSON 文件加载到我的 mithrilJs 应用程序中，并希望将此数据保存在某个全局变量中（JSON 文件用于 mithril 应用程序的一些运行时配置，就像Angular 中的app_initializer一样）到目前为止我已经在我的应用程序

import m from 'mithril';
import { a } from './MainView';

var Data = {


    fetch: function() {
        m.request({
            method: "GET",
            url: "./client/config/config.json",
        })
            .then(function(items) {
                console.log(items)
                 // want to store this
                m.route(document.body, "/accounts", a)

            })
    }

}
Data.fetch()

我的主视图文件包含

 import m from 'mithril';

 import {Layout} from "./components/layout";
 import {Accounts} from "./components/accounts";
 import {AccountNew} from './components/newAccount';
 export const a={
    "/accounts": {
        render: function (vnode) {

            return m(Layout, m(Accounts))
        }
    },
    "/accountsNew": {
        render: function (vnode) {
            return m(Layout, m(AccountNew))
        }
    },
}

所以有什么更好的方法，而且我想将获取的 json 文件数据（项目）存储在一些全局变量中，比如 react 中的 props 或 angular 中的服务，我该如何做到这一点以访问我的应用程序中的任何地方

标签： javascriptconfigurationroutingruntimemithril.js

解决方案

文档声明您可以使用 onmatch 来预加载数据，这是他们示例的粗略翻译：

var state = {
    items: null,
    loadItems: function() {
        if (state.items === null) {
            return m.request("./client/config/config.json").then(function(items) {
                state.items = items;
            });
        }
    }
};

const a = {
    "/accounts": {
        onmatch: state.loadItems,
        render: function (vnode) {
            return m(Layout, m(Accounts))
        }
    },
    "/accountsNew": {
        onmatch: state.loadItems,
        render: function (vnode) {
            return m(Layout, m(AccountNew))
        }
    },
}

您可以在此处的文档中阅读他们的两个示例：预加载数据。

替代解决方案

这些解决方案并不真正涉及秘银，因为您实际上是在使用秘银之前加载数据。您应该能够将状态变量作为属性传递给组件，即。return m(Layout, m(Accounts, {state}));

将 JSON 字符串转储到服务器端模板

如果您也控制服务器端，则可以通过输出分配给基本模板中的 javascript 变量的转义 JSON 字符串，将配置直接转储到全局变量中。我这样做是为了转储模型信息或会话信息，以便我的客户端代码可以使用它。

<script> var config = ${escapedJSONStringInServerVariable};</script>

直接导入配置

如果您重写 config.json 以将配置导出为对象，您也可以直接将配置导入您的应用程序。

import {Config} from ./client/config/config.js

m.request直接打电话

最后，您还可以将返回的承诺分配给m.requestvar 并将该承诺返回到loadItems. 这应该会立即触发 m.request，但会阻止加载模板，直到 promise 得到解决。


var state = (function () {
    var configRequest = m.request({
        url: "./client/config/config.json"
    }).then(function(items) {
        state.items = items;
    });
    return {
        items: null,
        loadItems: function() {
            return configRequest;
        }
    };
})();

推荐阅读