Warning The DOM Mixin API is currently experimental and may change.
With the release of Marionette 3.2, developers can remove the dependency on jQuery and integrate with the DOM using a custom mixin.
The DOM mixin manages the DOM on behalf of
CollectionView. It defines the methods that actually attach and remove views and children.
The default mixin depends on Backbone's jQuery
$ object however it does not rely on jQuery-specific behavior. This should make it easier to develop your own API. You will, however, need to also handle Backbone's jQuery integration.
Returns a new HTML DOM node instance. The resulting node can be passed into the other DOM functions.
Takes the DOM node
el and appends the rendered
children to the end of the element's contents.
sibling to the DOM immediately before the DOM node
sibling will be at the same level as
oldEl from the DOM and put
newEl in its place.
Remove the inner contents of
el from the DOM while leaving
el itself in the DOM.
Replace the contents of
el with the HTML string of
html. Unlike other DOM functions, this takes a literal string for its second argument.
el from the DOM.
selector string within the DOM node for
context. The optional
context argument will come in as a DOM Node reference to run the
selector search. If
context hasn't been set, then
findEls should search the entire
document for the
To implement your own DOM API for
View, override the provided functions to provide the same functionality provided and mix it in using
_.extend as such:
var Mn = require('backbone.marionette'); var MyDOMMixin = require('./mixins/mydom'); module.exports = Mn.View.extend(MyDOMMixin);
This would need to be applied to
Backbone.js is tied to jQuery's API for managing DOM manipulation. If you want to completely remove jQuery from your Marionette app, you'll also have to provide your own versions of the following methods:
The DOM Mixin takes care of the other DOM manipulation methods for you. The Backbone Wiki has a good reference for removing jQuery from the app, including Browserify and Webpack configuration hooks.
© 2017 Muted Solutions, LLC
Licensed under the MIT License.