Meteor + MVVM = ❤09.05.2016 16:48

534cb71c8b31432fb33cbfd484b22a34.jpg

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

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


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

  {{> hello param="123"}}















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

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

© Habrahabr.ru