Backbone.XView
Easy to use view manager for Backbone. Effortless nested views and templating.
Live interactive demo: http://jsbin.com/iyugul/16/edit
Usage
Easy templating
When styling your app it can be much easier to have all class names and tags defined in templates, rather than scattered between templates and JS code with tagName
and className
.
Backbone.XView automatically renders templates and child views, allowing you to keep all HTML tags, CSS IDs and classes in the template.
var UserListView = BackboneXView; var UserView = BackboneXView; var users = name: 'Bob' name: 'Gene' name: 'Tina' ; var list = ; //Insert each child view into the <ul> from the list by providing a selectorusers;
list.$el.html()
is now:
Users Name: Bob Name: Gene Name: Tina
Deeply nested views
If you're not using templates, XView can still help in managing nested views:
var parent = child = tagName: 'i' grandchild = tagName: 'b' ; child$el;grandchild$el; //Nest child in parent, and grandchild in childparent;child; parent; console;//<i>Child 1<b>Child 2</b></i> //All nested views will be removedparent;
Changelog
2.0.0
- Change the way CollectionView#showLoading and #showFallback work; now uses views to enable more complex use cases
1.5.0
- Add XView#renderTemplate() for overriding how templates are executed
- Locals override renderHelpers
1.4.0
- Fixes for fallback, loading and initial render state
- Add methods for showing/hiding fallback/loading elements so they can be overridden
1.3.x
- CollectionView: change itemContainer to listSelector
- CollectionView: add fallbackSelector and loadingSelector
1.2.x
- Add CollectionView, accessible through XView.Collection or Backbone.XView.Collection
1.1.x
- Add proper CommonJS support