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. Он должен возвращать похожий на массив объект узлов.

`hasEl(el, childEl)`

Возвращает true, если el содержит узел childEl

`detachEl(el)`

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

`replaceEl(newEl, oldEl)`

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

`swapEl(el1, el2)`

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

`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 глобально, но хотите повторно использовать стандартный API в некоторых случаях.

import { setDomApi, DomApi } from 'backbone.marionette';

import MyDOMApi from './mydom';

setDomApi(MyDOMApi);

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

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

Для реализации собственного API DOM используйте setDomApi:

import { setDomApi } from 'backbone.marionette';
import MyDOMApi from './mydom';

setDomApi(MyDOMApi);

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

import { View } from 'backbone.marionette';

View.setDomApi(MyDOMApi);

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

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

import { View } from 'backbone.marionette';

const MyView = View.extend();

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

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

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

См. также

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