Meteor + MVVM = ❤


Тут промайнула стаття, як чувак, вибираючи інструментарій, що нічого не міг написати. Це про мене! Під Новий рік знайшов ViewModel.org. А всередині прекрасний Two-Way Binding. Але не проходить відчуття скриньки в гаражі, заваленого гайковими ключами упереміш з "зайвими" деталями. Наочний приклад, як у власній демці довелося ввернути костыль, ги-ги. І я застряг на чотири місяці — хобі вечорами після роботи. Перебрав всі пакети, хоч як-то корисні для Blaze. Чіплявся до авторів з благаннями… Зібрав у підсумку новий велосипед з гучним ім'ям Template2.
Дуже складно зробити просто, як відомо. Зацініть:
  • Сумісність з Blaze Template. Ми його любимо.
  • Мінімальні зміни для міграції вашого геніального проекту.
  • Декларація змінних моделі потрібна тільки один раз через атрибут
    <input value-bind>
    (що окремо корисно для дебага коду прибульців).
  • Валідація вхідних даних та отримання асоціативного масиву документа для запису в Mongo — це все взагалі без кодинга.
  • Підтримка SimpleSchema і можливість розширення для інших моделей (тільки що вийшла Astronomy 2.0, наприклад).
<body>
{{> hello param="123"}}
</body>

<template name="привіт">
<p>props.param {{props.param}}</p>
<p>state.value {{state.value}}</p>
<form>
<input value-bind="value|debounce:300"/>
<button type="submit">Submit</button>
</form>
<p>{{state.errorMessages}}</p>
</template>

// Тюнінг - наше все!
Template2.mixin('hello', {
// Валідація параметрів, переданих з батьківського шаблону
propsSchema: new SimpleSchema({
param: { type: String }
}),
// Встановлював схему моделі
modelSchema: Posts.simpleSchema(),
// Встановив реактивні стани шаблону
states: {},
// Хелпери і Події працюють як колись, але з контекстом Template.instance()
helpers: {}, events: {},
// Колбеки живуть своїм життям без змін, як в стандартному Blaze
onCreated() {}, onRendered() {}, onDestroyed() {},
});

// Хелпери і Події можна декларувати в старому стилі, але з контекстом Template.instance()
Template.hello.eventsByInstance({
'submit form': function(e) {
e.preventDefault();
// Get doc after clean and validation for save to model
this.viewDoc(function(error, doc) {
if (error) return;
Posts.insert(doc);
});
}
});

// Колбеки старої школи можна використовувати без змін.
Template.hello.onRendered(function() {
var self = this;
this.autorun(function() {
var doc = Posts.findOne();
if (doc) {
// Set doc from model to view
self.modelDoc(doc);
}
});
});

Запустити демку? Легко:
$ git clone https://github.com/comerc/meteor-template2.git
$ cd meteor-template2
$ meteor

http://localhost:3000
А навіщо картинка? Так я себе відчуваю після коктейлю Meteor + MVVM.

Метеор-перекличка

/>
/>


<input type=«radio» id=«vv73090»
class=«radio js-field-data»
name=«variant[]»
value=«73090» />
Прийшов до успіху
<input type=«radio» id=«vv73092»
class=«radio js-field-data»
name=«variant[]»
value=«73092» />
Пишу в стіл
<input type=«radio» id=«vv73094»
class=«radio js-field-data»
name=«variant[]»
value=«73094» />
Поки цікавлюся

Проголосувало 33 людини. Утрималося 46 осіб.


Тільки зареєстровані користувачі можуть брати участь в опитуванні. Увійдіть, будь ласка.


Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.