API DOM

Предупреждение API DOM в настоящее время находится в стадии эксперимента и может быть изменён.

С выходом Marionette 3.2 разработчики могут убрать зависимость от jQuery и интегрироваться с DOM с помощью пользовательского API.

Методы API

API DOM управляет DOM от имени каждого типа представления и Region. Он определяет методы, которые фактически прикрепляют и удаляют представления и дочерние элементы.

API по умолчанию зависит от jQuery Backbone $ объекта, однако он не полагается на специфичное для jQuery поведение. Это должно облегчить разработку собственного API. Однако вам также необходимо обработать интеграцию Backbone с jQuery.

createBuffer()

Возвращает новый экземпляр узла HTML DOM. Полученный узел может быть передан в другие функции DOM.

getEl(selector)

Поиск строки selector в DOM. selector также может быть элементом DOM. Он должен возвращать массив-подобный объект узла.

findEl(el, selector)

Поиск строки selector в узле DOM el. Он должен возвращать массив-подобный объект узлов.

detachEl(el)

Отсоединяет el от DOM без удаления слушателей.

replaceEl(newEl, oldEl)

Удаляет oldEl из DOM и помещает newEl на его место.

swapEl(el1, el2)

Меняет местами расположение el1 и el2 в DOM. Оба элемента должны иметь родительский узел, чтобы их можно было поменять местами.

setContents(el, html)

Заменяет содержимое el строкой HTML html. В отличие от других функций DOM, этот метод принимает только строку для своего второго аргумента.

appendContents(el, contents)

Принимает узел DOM el и добавляет узел DOM contents в конец содержимого элемента.

hasContents(el)

Возвращает булево значение, указывающее, содержит ли el дочерние узлы.

detachContents(el)

Удаляет внутреннее содержимое el из DOM, оставляя сам el в DOM.

API по умолчанию

API, используемый Marionette по умолчанию, прикреплён как Marionette.DomApi. Это полезно, если вы изменяете API глобально, но хотите повторно использовать значение по умолчанию в определённых случаях.

var Mn = require('backbone.marionette');

var MyDOMApi = require('./mydom');

Mn.setDomApi(MyDOMApi);

// Use MyDOMApi everywhere but `Marionette.View`
Mn.View.setDomApi(Mn.DomApi);

Реализация собственного API DOM

Чтобы реализовать собственный API DOM, используйте setDomApi:

var Mn = require('backbone.marionette');

var MyDOMApi = require('./mydom');

Mn.setDomApi(MyDOMApi);

Вы также можете реализовать другой API DOM для конкретного класса:

Mn.View.setDomApi(MyDOMApi);

CollectionView, CompositeView, NextCollectionView, Region, и View все имеют setDomApi. Каждый расширенный класс может иметь свой собственный API DOM.

Кроме того, API DOM может быть частично задан:

var MyView = Mn.View.extend();

MyView.setDomApi({
  setContents: function(el, html) {
    el.innerHTML = html;
  }
});

CollectionView beforeEl(el, sibling)

Единственное взаимодействие с DOM, не покрываемое API DOM, это CollectionView.beforeEl. Эту функцию следует переопределить отдельно.

Добавить sibling в DOM непосредственно перед узлом DOM el. sibling будет на одном уровне с el.

// Current implementation
Marionette.CollectionView.prototype.beforeEl = function(el, siblings) {
  this.$(el).before(siblings);
};

Интеграция Backbone с jQuery

Backbone.js связан с API jQuery для управления манипуляциями с DOM. Если вы хотите полностью удалить jQuery из приложения Marionette, вам также придётся предоставить свои собственные версии следующих методов:

• _setAttributes
• delegate
• undelegate

См. также

API DOM позаботится об остальных методах манипуляции с DOM за вас. В вики Backbone есть хорошая справка по удалению jQuery из приложения, включая настройки Browserify и Webpack.