3

我的应用程序具有三个“全局”的东西：具有 lat 和 lng 值的用户位置、用户是否登录以及他们选择的活动（将其视为一个类别）。

我希望在整个应用程序中使用这些值。每个屏幕都会使用这个日期的一些集合，所以每页加载它不是正确的答案。除非用户创建事件：不同的位置、活动或登录/注销，否则信息也不会改变。

我应该如何设置？

我的想法是在启动时应该有一个初始加载，在我的 main.js 文件中我加载每个然后 app.start 像这样：

站点服务.js

define([...], function (...) {
    return {
        init: function () {
            return $.when(
                activityService.getStoredActivity(),
                locationService.getStoredLocation(),
                userService.getUsername()
            );
        }
    }
});

main.js

定义([..., 'modules/siteService'], function (..., site) { ...

site.init().then(function () {
    app.start().then(function () {
        ...
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

});

这确实确保了数据已加载。从那里在我的每个服务中，我将信息存储到本地存储中，因此我不必继续触发 AJAX 调用。如果没有本地存储，它会。

当我在其他页面中需要这些数据时，问题就会出现。我最终在每个页面的激活方法中调用我的 site.init().then() 。这很草率。

外壳.js

self.activate = function () {
            ...
    siteService.init().then(function (activity, location, username) {
        self.activity(activity);
        self.location(location);
        setUsername(username);
    });
    return router.activate();
};

然后再次进入：

欢迎.js 

this.activate = function () {    
     site.init().then(function(activity, location) {
           loc = location;
           act = activity;
           load();
       });
});

我想最初设置这些值，每个页面最初都从这些值加载，然后使用 Durandal 的 pub/sub 对事后的任何更改做出反应。

我正在考虑仅使用 pub/sub，但后来觉得在加载与页面加载相关的数据时，我会遇到先有鸡还是先有蛋的问题（IE 如果我的 AJAX 先加载，而我的页面没有加载，事件触发，但页面永远不会得到更新）。

是否可以在 javascript 中设置类似静态类的东西来最初提取数据，然后在整个视图模型中共享它？或者，有没有办法保证在我最初加载页面时该值存在，例如 app.on('value', { initialize: true })？

4

2 回答 2

8

当一个require.js模块返回一个对象时，该对象是一个单例，所以你可以有类似的东西

设置.js

define(function() {
  return {
    location: {
      lat: 0,
      long: 0
    },
    loggedin: false,
    activity: ""
  }
});

然后，任何时候您将其命名settings为依赖项，您将始终获得对同一对象的引用，并且您可以根据需要获取/设置其字段。

于 2014-01-08T01:17:48.467 回答
2

将siteService.js更改为：

define([...], function (...) {
    var module = function () { };

    module.prototype.activity = {};
    module.prototype.location = {};
    module.prototype.username = {};

    module.prototype.init = function () {
        return $.when(
            activityService.getStoredActivity(),
            locationService.getStoredLocation(),
            userService.getUsername()
        ).then(function (activity, location, username) {
            module.prototype.activity = activity;
            module.prototype.location = location;
            module.prototype.username = username;
        });
    };

    return module;
});

main.js到

define([..., 'modules/siteService'], function(..., Site) {
    site = new Site();
    site.init().then(function () {
        app.start().then(function () {
            ...
            app.setRoot('viewmodels/shell', 'entrance');
        });
    });

shell.js和welcome.js现在只需使用：

        var site = new Site();
        self.activity(site.activity);
        self.location(site.location);
        setUsername(site.username);

和

        var site = new Site();
        loc = site.location;
        act = site.activity;
于 2014-01-07T23:58:33.987 回答