我正在尝试找出一种方法来构建我的应用程序,使 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