Структурирование файла и кода в DurandalJS

Question

Я пытаюсь выяснить способ структурирования своего приложения таким образом, чтобы взаимодействия с API не зависели от моих представлений и моделей viewmodels.

На данный момент мои вызовы ajax (получить, добавить, сохранить, удалить и т. Д.) И модели (модель пользователя, модель сообщений) находятся внутри моих моделей просмотра, но в будущем у нас будет мобильное приложение, которое будет немного отличаться от настольного приложения, поэтому я бы хотел, чтобы эти действия были доступны в одном месте.

Я видел, как люди используют папку «services», где у них есть модели, которые обрабатывают загрузку и хранение данных, но не видели полной структуры, которая также включает обработку новых и текущих данных.

Предположим, у меня есть отдельная оболочка «страницы профиля», которая включает вкладку «сообщения» и вкладку «данные пользователя». В этом разделе необходимо следующее:

• детали пользователю получить
• получить сообщения
• пользователя Модель
• Сообщение Модель
• добавить/редактировать/удалить сообщение
• детали редактировать пользовательские

Как я могу это структурировать? Индивидуально по компонентам (сообщения с моделью + get + добавить/изменить/удалить и пользователь с моделью + получить + редактировать в отдельных файлах/папках) или по области сайта (все в одном файле/папке)?

Надеюсь, это имеет смысл. Спасибо!

Answer 1

Я не испытываю в Дюрандале, но имею положительный фон, работающий с КО. Я бы рекомендовал вам применить шаблон модуля и инкапсулировать все ваши методы обслуживания API в отдельный класс (позвоните ему Router), также помещая его в отдельный файл. А затем используйте методы класса Router внутри viewmodels.

// 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