Първи стъпки с Backbone.js в Drupal 8

Backbone.js е лека javascript библиотека, която идва веднага с Drupal 8. Той дава структура на вашия проект за уеб приложение, като предоставя модели, колекции иизгледи.Ние ще разгледаме тези концепции, за да видим как може да можете да ги използвате, за да опростите вашия javascript.

кой съм аз

Казвам се Tolu Laleye, Full-Stack разработчик и Acquia Certified Drupal 8 Grand master. Работя по уеб сайтове и приложения за обществени и частни клиенти от около 4 години.

Да започваме!

Днес ще изградим заедно прост многоетапен съветник и се надяваме, че правенето на това ще ви помогне да разберете как всичко става заедно. Моля, имайте предвид, че няма да покривам всички концепции на backbone.js, но това трябва да е добра отправна точка за самостоятелно проучване.

Добавяне на Backbone към вашия модул

Дефиниране на модела

Моделите са сърцето на всяко JavaScript приложение, съдържащо интерактивните данни, както и голяма част от логиката около тях: реализации, валидации, изчислени свойства и контрол на достъпа. Вие разширявате Backbone.Model със специфични за вашия домейн методи, а Model предоставя основен набор от функционалности за управление на промените.

Ето няколко свойства и функции, които стават достъпни, когато разширите основния модел:

По подразбиране:Задава стойност по подразбиране за модел. Това означава, че ако потребителят не посочи никакви данни, атрибутите ще бъдат зададени на стойността си по подразбиране.

var person = Backbone.Model.extend({
  defaults: {
    name: null,
    age : null,
  }
});

getmodel.get(attribute) : Вземете текущата стойност на атрибут от модела.

person.get('name');

setmodel.set(attributes, [options]) : Когато зададете някой от атрибутите на модел, ще се задейства събитие „промяна“ на модела. Събитията за промяна за конкретни атрибути също се задействат и можете да се обвържете с тях. Ще обсъдим обвързването на данни по-късно в тази статия.

person.set('age', 23);

Обвързване на данни

Общата идея е да организирате интерфейса си в логически изгледи, подкрепени от модели, всеки от които може да се актуализира независимо, когато моделът се промени, без да се налага да преначертавате страницата. Можете да свържете функцията за изобразяване на вашия изглед към събитието „промяна“ на модела – и сега навсякъде, където данните за модела се показват в потребителския интерфейс, те винаги са незабавно актуални.

Ето няколко свойства и функции, които стават достъпни, когато разширите основния изглед:

събития:събитията се записват във формат {“селектор на събития”: “обратно извикване”}. Пропускането на селектора кара събитието да бъде обвързано с основния елемент на изгледа (this.el).

var note = Backbone.View.extend({
  events: {
    'click .button.edit': 'openEditDialog',
  },
  initialize: function() {
    ...
  },
  openEditDialog: function() {
    $('#dialog').dialog({
      autoOpen: false,
      show: {
        effect: 'blind',
        duration: 1000
      },
      hide: {
        effect: 'explode',
        duration: 1000
      }
    });
  },
  render: function() {
    ...
  }
});

$el:Кеширан jQuery обект за елемента на изгледа. Удобна справка, вместо да опаковате отново DOM елемента през цялото време.

note.$el.addClass('edit-mode');

initializenew View([options]) : Ако изгледът дефинира функция за initialize, тя ще бъде извикана при първото създаване на изгледа. Ако искате да създадете изглед, който препраща към елемент вече в DOM, предайте елемента като опция: new View({el: existingElement})

listenToobject.listenTo(other, event, callback) : Използвайте change, за да кажете на изгледа да слуша за събития на промяна на модела и change:[attribute] — за това, когато определен атрибут е актуализиран.

var note = Backbone.View.extend({
  events: {
    ...
  },
  initialize: function() {
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'change:isActive', this.changeState);
  },
  changeState: function() {
    ...
  },
  render: function() {
    ...
  }
});

render:Той съдържа логика, която изобразява шаблона за изглед от данните на модела. Добра конвенция е да се върне this в края на изобразяването, за да се активират верижните повиквания.

var note = Backbone.View.extend({
  events: {
    ...
  },
  initialize: function() {
    ...
  },
  render: function() {
    this.$el.toggleClass('active', this.model.get('isActive'));
    return this;
  }
});

MV*

Backbone е агностик по отношение на вашия предпочитан метод за HTML шаблони. Вашата функция за рендиране може дори да обедини HTML низ. Предлагаме обаче да изберете хубава библиотека за шаблони.

Ние ще използваме twig за тази статия.