Question

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

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

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

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

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

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

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

Answer 1

我没有Durandal的经验，但有一些积极的背景与KO合作。我建议你应用模块模式并将所有API服务方法封装到单独的类中（让我们称之为Router），并将其放入单独的文件中。然后在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)

Answer 2

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

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

DurandalJS中的文件和代码结构

2 个答案: