Комментарии 29
var eventMixin = {
on: function (eventName, handler) {},
off: function (eventName, handler) {},
trigger: function (eventName) {}
};
//конструктор (модель)
var Book = function () {};
Book.byObject = function () {};
var bookService = (new function () {
var self = this,
books = [];
//добавляем примесь событий сюда
self.add = function (data) {
var newBook = Book.byObject(data);
books.push(newBook);
self.trigger('add', newBook);
};
//... и т.д. CRUD
//так же сюда все xhr.
});
//далее view
var BookForm = function ($container) {
this.onClickSubmit = function (cb) {
$($container).on('click', '.js-submit', function () {
cb(formData) //тут можно прокинуть все поля формы
});
};
};
//непосредственно инит приложения
$(function () {
bookService.on('add', function () {
//Вызвать какое-либо изменения интерфейса
//Не обязательно BookForm, а любого другого.
});
var bookForm = new BookForm(/**/);
bookForm.onClickSubmit(function (formData) {
bookService.add(formData);
})
});
Как-то так. Основная идея, что представление и бизнес логика очень слабо связаны. Другой вопрос в том, удобно ли так описывать интерфейсы.
Вместо того, чтобы городить свой собственный eventMixin лучше взять существующий Backbone.
И про такой подход обычно так и говорят — "мы пишем на Backbone", потому что в нем основная логика и крутится.
А когда говорят "мы пишем на jQuery", это означает, что никакой дополнительной библиотеки не используется, а код выглядит примерно как и есть в статье.
В этом отношении jquery на порядок чище и читаемее.
syncRemoveButtons() в addAttendee() в примере с jQuery вообще лишний.
Перед тем, как полезу глубже, хотелось бы осознать еще пару моментов:
- Vue полностью оберегает нас от прямых манипуляций с DOM? Все работает через мониторинг и реагирование на изменение данных? Если так, то есть ли все-таки возможность обращаться к элементам через какой то движок типа Sizzle, или все-таки надо использовать jquery, если не привык к vanillajs? Чтобы, например, проинитить data из какого то элемента.
- Насколько гибки Vue-шные атрибуты, отвечающие за работу с DOM? Например, есть ли возможность тому же v-show указать эффект вроде v-show.slide или fade, задать параметры? Или есть ли возможость навесить обработчики не напрямую элементу, а потомкам через предка, как это делает on у jquery?
- Если хочется оживить несколько разных областей на странице при помощи Vue, как надо действовать согласно best practices: создавать один Vue на страницу с «под-data-ми» или несколько на каждую область (тогда наверно и с событиями будет меньше путаницы)?
2)Получать что то по селектору для обслуживания логики приложения обычно считается wrong-way при работе с фреймворками.От так то, благородный дон)
Здесь очень важно понять саму концепцию. Vue и другие фреймворки предлагают подход "создаем DOM из данных" в отличие от jQuery, где "извлекаем данные из DOM". Поэтому возможности обхода по селекторам крайне ограничены. Если нужно получить DOM-ноду — есть ref.
Если планировать использовать Vue, то нужно перестать кодировать данные в data-атрибутах. Здесь показывается, какие есть у Vue альтернативные способы передать данные в компонент.
При использовании vue, данные нужно передавать не через data атрибуты, а через props.
Вместо
<div data-initial-value="50"></div>
Следует писать
<my-component initial-value="50"></my-component>
Для анимации переключения состоянии во vue используется компонент transition.
Механизм делегирования событий с родителя на потомков во vue не предусмотрен, в большинстве случаев он и не нужен. Если же у вас нужно обработать события на сотнях или тысячах потомков, то можно повесить обработчик на родителя и в нем вручную проверить, что целью срабатывания был потомок.
- На странице может быть только один экземпляр vue, разные области лучше разнести по разным компонентам
Публикации
Vue.js tutorial: от jQuery к Vue.js