Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jridgewell/minionette
A mini Marionette for Backbone.js
https://github.com/jridgewell/minionette
Last synced: 2 months ago
JSON representation
A mini Marionette for Backbone.js
- Host: GitHub
- URL: https://github.com/jridgewell/minionette
- Owner: jridgewell
- License: other
- Created: 2013-07-31T19:30:04.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-11-03T01:13:38.000Z (about 9 years ago)
- Last Synced: 2024-10-03T09:18:27.195Z (3 months ago)
- Language: JavaScript
- Homepage: http://jridgewell.github.io/minionette/
- Size: 1.36 MB
- Stars: 23
- Watchers: 11
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Minionette [](https://travis-ci.org/jridgewell/minionette) [](https://codeclimate.com/github/jridgewell/minionette) [](https://coveralls.io/r/jridgewell/minionette)
==========
A mini Marionette for Backbone.js
Minionette provides three highly optimized View classes for you to use,
`Minionette.View`, `Minionette.ModelView`, and
`Minionette.CollectionView`. Each class is designed to ease development,
from using several performance boosting techniques during rendering to
placing subviews directly in templates and allowing the subviews to be
easily removed.
Why?
----
Because Backbone doesn't get much better than this:
```javascript
var NavItem = Minionette.ModelView.extend({
tagName: 'li',
template: _.template('<%= text %>')
});
var Nav = Minionette.CollectionView.extend({
ModelView: NavItem,
tagName: 'ul',
template: _.template('
appendModelView: function(view) {
this.$('.last').before(view.$el);
}
});
var Main = Minionette.View.extend({
template: _.template('
Some content from another view
')});
var navCollection = new Backbone.Collection([
{ text: 'home', href: '/' },
{ text: 'google', href: 'http://google.com/' }
]);
var App = Minionette.View.extend({
el: $('body'),
template: _.template(
'<%= view("nav") %>' +
'
),
regions: {
nav: new Nav({collection: navCollection}),
content: '#content'
}
});
var app = (new App()).render();
app.nav.render();
app.content.attach(new Main()).render();
```
[Minionette.View](/docs/minionette.view.md)
-----------------
`Minionette.View` is the base View class, providing an easy way to
listen for events on an associated model or collection, an actually
useful generic rendering function, easy subviews (AKA Regions).
[Minionette.Region](/docs/minionette.region.md)
-------------------
`Minionette.Region`s help manage subviews of a `Minionette.View`,
allowing you to specify directly in a template where a subview should be
attached. A view can have any number of regions, each managing their own
part of the overall view.
[Minionette.ModelView](/docs/minionette.modelview.md)
----------------------
`Minionette.ModelView` is nothing more than `Minionette.View` with two
minor tweaks to easily support rendering models.
[Minionette.CollectionView](/docs/minionette.collectionview.md)
---------------------------
`Minionette.CollectionView` is an optimized `Minionette.View` for your
Backbone collections. It quickly handles rendering using a
DocumentFragment, ensuring at most three content reflows even with
hundreds of models to render. The most important feature of
`CollectionView` is the `#ModelView` property, from which all models
will have a view instantiated from.
Other Templating Languages
--------------------------
### Handlebars.js
Full support for Handlebars.js templating is trivial. Just use the
following:
```javascript
Handlebars.registerHelper('view', function(name) {
return new Handlebars.SafeString(this.view(name));
});
```
This will allow for template subview insertion using the special `{{view
'regionName'}}` syntax.
### Mustache.js
Full support for Mustache.js templating takes just a bit more effort.
You must override the internal-use `_serialize()` method in your view
with the following:
```javascript
var View = Minionette.extend({
//...
_serialize: function() {
var _viewHelper = this._viewHelper;
return _.extend({view: function() { return _viewHelper; }}, this.serialize());
}
//...
});
```
This will allow for template subview insertion using the special
`{{#view}}regionName{{/view}}` syntax. For ease of use, have all of
your new View classes extend from this, and they will all be compatible
with Mustache.