Переменные для хранения реактивных данных в Meteor

В Meteor мы имеем несколько разных способов хранения и установки реактивных данных, для чего используются переменные Reactive Dict, Reactive Vars и Session Variables. Это полезно, когда мы хотим сохранить какое-то состояние в нашем приложении и обновить его при изменении базовых данных. В чем же различия между этими переменным и когда что лучше использовать их в приложениях? Рассмотрим каждую из них подробнее.

Session Variables (Переменные сеанса)

Переменные сеанса встроены в Метеор по умолчанию. Это наиболее распространённая и используемая форма хранения реактивных данных в приложении. Session Var работают с использованием пар ключ-значение. Пример:

// String 
Session.set( "ExampleString", "value" ); 
// Number 
Session.set( "ExampleNumber", 12345 ); 
// Object 
Session.set( "ExampleObject", { "keyOne": "first", "keyTwo": "second" } );

Переменные сеанса существуют глобально. Это означает, что независимо от того что зависит от Session.get() , когда изменяется его значение, оно будет обновляться.
Особенностью переменных сеанса является то, что они могут быть проверены на равенство с другим значением. Это может пригодиться, когда вы хотите оценить реактивные данные “на лету“, не устанавливая переменную, равную Session.get( “myVariable” );

Reactive Variables (Реактивные переменные)

Другим вариантом хранения реактивных данных является ReactiveVars или реактивные переменные. В отличие от переменных сеанса мы должны установить дополнительный пакет для них:

meteor add reactive-var

ReactiveVar предназначен для хранения одиночных значений любого типа (в отличие от переменных Session, которые могут поддерживать только типы JSON и EJSON). Если переменные сеанса используются для хранения глобальных данных, ReactiveVar лучше подходит для локальных данных, особенно на уровне шаблона. Хорошим примером может быть обновление интерфейса на основе пользовательского ввода.

Template.exampleForm.onCreated(function(){
  // Here, this equals the current template instance. We can assign
  // our ReactiveVar to it, making it accessible throughout the
  // current template instance.
  this.showExtraFields = new ReactiveVar( false );
});
Template.exampleForm.helpers({
  showExtraFields: function() {
    // Here we get our template instance from Template.instance() and
    // can access showExtraFields from it.
    return Template.instance().showExtraFields.get();
  }
});
Template.exampleForm.events({
  'change select': function( event, template ) {
    if ( $( event.target ).val() === "show" ) {
      // Here we get our template instance from the template
      // argument in our event handler.
      template.showExtraFields.set( true );
    } else {
      template.showExtraFields.set( false );
    }
  }
});

Reactive Dictionary (Реактивный словарь значений)

ReactiveDict - еще один вариант хранения данных, который можно рассматривать как комбинацию между Session и ReactiveVar. ReactiveDict ведет себя и используется идентично ReactiveVar, но отличается тем, сколько он может хранить. Как можно понять из названия, ReactiveDict может хранить словарь значений. Для работы с ним нужно подключить дополнительный пакет:

meteor add reactive-dict

Как только это будет сделано, подключение к ReactiveDict так же просто, как ReactiveVar. Вот как мы его используем:

Template.exampleForm.onCreated( function() {
  this.templateDictionary = new ReactiveDict();
  this.templateDictionary.set( 'showExtraFields', false );
});
Template.exampleForm.helpers({
  showExtraFields: function() {
    return Template.instance().templateDictionary.get( 'showExtraFields' );
  },
});
Template.exampleForm.events({
  'change select': function( event, template ) {
    if ( $( event.target ).val() === 'show' ) {
      template.templateDictionary.set( 'showExtraFields', true );
    } else {
      template.templateDictionary.set( 'showExtraFields', false );
    }
  }
});

Довольно похоже. Что отличает их от переменных сеанса? Там, где мы использовали set и get непосредственно экземпляр шаблона, теперь мы вытаскиваем имя нашего ReactiveDict из экземпляра шаблона, а затем используем имя ключа для get и set значений в нашем словаре. Как вы можете догадаться, мы можем установить столько значений, сколько хотим в словаре, используя .templateDictionary.set ('anotherField', 'anotherValue') ;.
Подобно переменным сеанса, мы можем оценить равенство наших значений ReactiveDict.

Когда лучше использовать тот или иной вариант?

Когда лучше использовать тот или иной вариант?
Итак, у нас есть три вида областей:
1) Глобальная область. Например, тут может быть текущий язык интерфейса, UI. Для этого стоит использовать Session-переменные.

2) Кластер шаблонов. Например есть кластер, который представляет собой папку с тремя файлами: example.html , example.js и example_controller.js. В начале файла example.js необходимо создать реактивный словарь pageSession( по аналогии с реактивными переменными). Это позволяет передавать данные из всех компонентов кластера.

3) Локальная область. Для единичного шаблона или многократно используемого компонента. Тут не стоит использовать Session-переменные, чтобы не загромождать Session пространство имен. Используя Reactive Dictionary или Reactive Vars, стоит помнить, что реактивность происходит в пределах одного шаблона

Итак, теперь мы понимаем, как использовать эти различные методы хранения реактивных данных. ReactiveVar и ReactiveDict удобны, поскольку мы можем связать их с экземпляром шаблона, делая их локальными, нам не нужно беспокоиться о загрязнении глобального пространства имен, как это было бы с переменной Session.
При использовании переменных Session мы должны убедиться, что данные, которые мы храним в них, действительно необходимы на глобальной основе или должны существовать после введения кода в работу. Это хороший способ обработки состояния / данных формы, поэтому, если пользователь заполняет форму и мы выполняем некоторый код, они не теряют свою работу.

Поделиться в соцсетях: