Шаблон MVP с фреймворком Javascript?

Ответ 1

Основной целью MVP является развязка различных аспектов кода. Как правило, в JavaScript есть три основных аспекта:

• Обработка событий
• манипуляции с DOM
• Связь с сервером (вызовы AJAX)

Для каждой из этих проблем существует соответствующий термин из MVP:

• EventHandling = Presenter
• DOM Manipulation = Просмотр
• AJAX calls = Model

Так как на самом деле не всегда просто реализовать три аспекта, может понадобиться EVENT BUS. Эта шина должна быть одиночной, и все события, поднятые в различных контекстах, должны быть опубликованы на автобусе. Презентатор должен зарегистрироваться на свои мероприятия и соответственно реагировать на события.

Вот как это работает:

Первое, что происходит, это загрузка страницы. Слушайте это, используя обычную модель событий или jQuery или что угодно. Создайте модель, представление и презентатор. Ведущему нужно удержать экземпляры View и Model, так как он будет их использовать.

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

Помните, что Presenter - это обработчик событий, поэтому шина должна знать об этом и маршрутизировать события для обработки:

bus.registerHandler(presenter);

Первым событием является "init", что означает, что страница загружена и все объекты MVP установлены:

bus.init(); // call this yourself

Это вызовет что-то в Presenter, как функция. Я предпочитаю соглашение on... naming в этом примере presenter.onInit(). Это дает возможность установить UI-слушателей:

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

При нажатии кнопки "Отправить" вызывается bus.submit(formData), и это направит его обработчику-presenter.onSubmit(formData):

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

И так далее... Весь трюк привязывает шину к ведущему, а затем вы находитесь в цикле.

НТН

Ответ 2

Взгляните на knockout.js, который является основой MVVM для ваших веб-страниц. Он обеспечивает действительно красивую и легко расширяемую структуру для связывания модели и представления в связном режиме.

Ответ 3

Зайдите в angular проект http://angularjs.org/ и не стесняйтесь задавать любые вопросы в группе рассылки.

Он предназначен для совместной работы с jQuery. Очень полезно для написания приложений TESTABLE MVC JS.

Ответ 4

Я знаю, что этот вопрос старый, но я думаю, что здесь стоит упомянуть. Мой голос идет на Backbone.js. Даже документы говорят, что это MVC, я бы сказал, что это MVP.

• VIEW = шаблон html (jQuery.template)
• MODEL = Backbone.Model
• PRESENTER = Backbone.View(слой между вашим шаблоном просмотра и тем, как привязывать к нему данные, и более того, что вы можете сделать), и что лучше всего использовать в виде представлений пары методов (html-шаблоны) или переключателя, который использовать...

и что лучше всего у вас есть контроллер

• CONTROLLER = Backbone.Controller

Альтернатива может быть такой, как упоминалось @JoshRivers, нокаутJS, но мое личное мнение заключается в том, что шаблон просмотра перегружен связующим материалом.

И последнее примечание. Thing is View как V из MVC или MVP - это то, что можно построить из вашего шаблона без его кодирования, сделать хороший синтаксический анализатор HTML-шаблона, и вам хорошо идти:) Верьте мне, соглашение - ваш друг.

Ответ 5

Отметьте PureMVC вне. Они также порт для JavaScript.

Ответ 6

Еще один, для пользователей jQuery: http://javascriptmvc.com/

Просто обратите внимание, что Ext JS также поддерживает шаблон MV (x) с версии 4.0, который я буду упоминать как ex-Ext. Как и большинство фреймворков, они также называют это "MVC" (как и большинство людей в мире JS, см. TodoMVC, в отличие от TodoMVP). Однако с практической точки зрения, инструменты существуют в Ext для реализации части C/P шаблона, наилучшим образом отвечающей вашим потребностям. Шаблоны полезны, но, как и большинство вещей, могут ограничивать ваше мышление, когда они догматичны.

Ответ 7

Кажется, Google использует GWT MVP:

Google GWT

Ответ 8

Мы говорим о MVP здесь, люди! Не MVC! По моему мнению, отрасль еще не готова к MVP. Все все еще пытаются понять MVC.

Ответ 9

Посмотрите Riot.js - совершенно новая автономная микробиблиотека MVK (!) MVP, в которой есть все необходимое для создания масштабируемого, модульное приложение для JavaScript. Существует полномасштабная демонстрация.

Ответ 10

Я искал несколько примеров для MVP-фреймворков и натолкнулся на эту ссылку, которая может быть очень полезна для определения структуры, над которой вы хотите работать:   MV * Framework