A drop-in replacement for Marionette views (View, CollectionView, NextCollectionView) that uses only native DOM methods for element selection and event delegation. It has no dependency on jQuery.
When using a script tag, the view classes and the mixin can be found at Marionette.Native namespace Example:
var NativeView = Marionette.Native.NativeView; var mixin = Marionette.Native.mixin;
import {NativeView, NativeCollectionView, NativeNextCollectionView} from 'marionette.native';
var MyView = NativeView.extend({
initialize: function(options) {
// ...
}
});
var MyCollectionView = NativeCollectionView.extend({
initialize: function(options) {
// ...
}
});
var MyNextCollectionView = NativeNextCollectionView.extend({
initialize: function(options) {
// ...
}
});
As an alternative, you may extend an existing View's prototype to use native methods, or even replace Backbone.View itself:
import {View} from 'backbone.marionette';
import {mixin} from 'marionette.native';
var MyBaseView = View.extend(mixin);
or
import {View} from 'backbone.marionette';
import {mixin} from 'marionette.native';
var MyBaseView = View.extend();
_.extend(MyBaseView.prototype, mixin);
or
// patch Marionette view classes directly
import {View} from 'backbone.marionette';
import {mixin} from 'marionette.native';
_.extend(View.prototype, mixin);
To remove jQuery dependency put the following code in start of application
import {View, CollectionView, NextCollectionView, Region} from 'backbone.marionette';
import {mixin, domApi} from 'marionette.native';
_.extend(View.prototype, mixin);
_.extend(CollectionView.prototype, mixin);
_.extend(NextCollectionView.prototype, mixin);
Region.setDomApi(domApi);
or
import 'marionette.native/patches'
With Backbone.NativeAjax
import 'backbone.nativeajax'
or with Backbone.Fetch
import 'backbone.nativeajax'
or with Dom7 (Framework7)
import 'framework7'
import Backbone from 'backbone'
Backbone.ajax = Dom7.ajax
With webpack
//nojquery.js - in same dir as webpack.config.js
module.exports = function() {};
//webpack.config.js
module.exports = {
// [..]
resolve: {
alias: {
jquery: path.resolve(__dirname, './nojquery.js')
}
}
};
or with script tag:
<script>
//dummy jquery
window.jQuery = window.$ = function () {}
</script>
Delegation:
var view = new MyView({el: '#my-element'});
view.delegate('click', view.clickHandler);
Undelegation with event names or listeners,
view.undelegate('click', view.clickHandler);
view.undelegate('click');
View-scoped element finding:
// for one matched element
_.first(view.$('.box')).focus();
// for multiple matched elements
_.each(view.$('.item'), function(el) {
el.classList.remove('active')
});
var fields = _.pluck(view.$('.field'), 'innerHTML');
Marionette.Native makes use of querySelector
and querySelectorAll
. No support for IE8.
- The
$el
property is set to an array containingview.el
. View#$
returns a NodeList instead of a jQuery context. You can iterate over either using_.each
.- The event object, passed in event handlers, is the native one which,
among other things, handles
currentTarget
differently. On the other hand, the non standarddelegateTarget
is properly set in the event object.
With many thanks to @wyuenho and @akre54 for their initial code.