Тут мелькнула статья, как чувак, выбирая инструментарий, ничего не мог написать. Это про меня! Под Новый год нашёл ViewModel.org. А внутри прекрасный Two-Way Binding. Но не проходит ощущение ящика в гараже, заваленного гаечными ключами вперемешку с "лишними" деталями. Наглядный пример, как в собственной же демке пришлось ввернуть костыль, гы-гы. И я застрял на четыре месяца — хобби по вечерам после работы. Перебрал все пакеты, хоть как-то полезные для Blaze. Приставал к авторам с мольбами… Собрал в итоге новый велосипед с громким именем Template2.


Очень сложно сделать просто, как известно. Зацените:


  • Совместимость с Blaze Template. Мы его любим.
  • Минимальные изменения для миграции вашего гениального проекта.
  • Декларация переменных модели нужна только один раз через атрибут <input value-bind> (что отдельно полезно для дебага кода пришельцев).
  • Валидация входных данных и получение ассоциативного массива документа для записи в Mongo — это всё вообще без кодинга.
  • Поддержка SimpleSchema и возможность расширения для других моделей (только что вышла Astronomy 2.0, например).

<body>
  {{> hello param="123"}}
</body>

<template name="hello">
  <p>props.param {{props.param}}</p>
  <p>state.value {{state.value}}</p>
  <form>
    <input value-bind="value"/>
    <button type="submit">Submit</button>
  </form>
  <p>{{state.errorMessages}}</p>
</template>

// Тюнинг - наше всё!
Template2('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.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Метеор-перекличка
14.01%Пришёл к успеху22
19.11%Пишу в стол30
66.88%Пока интересуюсь105
Проголосовали 157 пользователей. Воздержались 120 пользователей.