DurandalJS中的文件和代码结构

File and code structuring in DurandalJS

本文关键字：代码 结构 文件 DurandalJS      更新时间：2023-09-26

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

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

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

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

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

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

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

我在杜兰达尔没有经验，但有一些与KO合作的积极背景。我建议您应用模块模式并将所有API服务方法封装到单独的类中（我们称之为路由器），并将其放入单独的文件中。然后在视图模型中使用 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)
我不知道

你用什么做后端，但如果它是MVC ASP.NET，我强烈建议你查看HotTowel模板。即使它不是 MVC ASP.NET，它仍然是了解如何有效地构建应用的良好起点。

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

相关文章：