DurandalJS 中的文件和代码结构答案

【问题标题】：File and code structuring in DurandalJSDurandalJS 中的文件和代码结构
【发布时间】：2013-11-12 23:36:58
【问题描述】：

我正在尝试找出一种方法来构建我的应用程序，使 API 交互独立于我的视图和视图模型。

目前，我的 ajax 调用（获取、添加、保存、删除等）和模型（用户模型、消息模型）都在我的视图模型中，但在未来，我们将拥有一个移动应用程序与桌面应用程序有点不同，因此我希望将这些操作集中在一个地方。

我看到人们使用“服务”文件夹，其中有处理加载和存储数据的模型，但还没有看到一个完整的结构，还包括处理新数据和当前数据。

假设我有一个单独的“个人资料页面”外壳，其中包括一个“消息”选项卡和一个“用户详细信息”选项卡。本节需要以下内容：

获取用户详细信息
获取消息
用户模型
消息模型
添加/编辑/删除消息
编辑用户详细信息

我将如何构建它？单独按组件（使用模型 + 获取 + 添加/编辑/删除的消息和使用模型 + 获取 + 在单独文件/文件夹中编辑的用户）或按站点区域（一个文件/文件夹中的所有内容）？

希望这是有道理的。谢谢！

【问题讨论】：

标签： javascript knockout.js durandal

【解决方案1】：

我在 Durandal 没有经验，但在与 KO 合作时有一些积极的背景。我建议您应用模块模式并将所有 API 服务方法封装到单独的类（我们称之为路由器）中，并将其放入单独的文件中。然后在viewmodels中使用Router类的方法。

// file with Router class

(function ($, ko, app) {
    app.Router = function () {
        var self = this;

        self.get = function (url, queryString, callBack) {
            $.get(url, data, function(data) {
                callBack(data);
            });
        };

        self.post = function (url, queryString, callBack) {
            $.post(url, data, function(data) {
                callBack(data);
            });
        };

    };
})(jQuery, ko, window.app)

// file with viewmodel

(function ($, ko, app) {
    app.UserModel = function () {
        var self = this;

        //create instance of Router class. 
        //Create it here just for the example. Will be better to create it out of the models to have just one instance. 
        //Or convert Router class to singleton
        var router = new app.Router();

        self.getUserDetails = function() {
            //use proper router method to GET data, providing params
            router.get(properRestServiceUrl, {userID: 1}, self.showUserDetails);
        };

        self.addMessage = function() {
            //use proper router method to POST data, providing params
            router.post(properRestServiceUrl, {userID: 1, message: 'test message'}, self.showConfirmation);
        };

        //callback function
        self.showUserDetails = function(data) {
            alert(data);
        };

        //callback function
        self.showConfirmation = function(data) {
            alert("The message was added successfully!");
        };

    };
})(jQuery, ko, window.app)

【讨论】：

【解决方案2】：

我不知道你在后端使用什么，但如果它是 ASP.NET MVC，我强烈建议你查看 HotTowel 模板。即使它不是 ASP.NET MVC，它仍然是了解如何有效构建应用程序的一个很好的起点。

http://www.asp.net/single-page-application/overview/templates/hottowel-template

【讨论】：