This document summarizes key points about working with Marionette.js views: 1) Views have a lifecycle of initialize(), render(), onRender(), destroy(), with events handled in onRender() rather than render(). 2) Templates can be JavaScript functions or require'd .ejs files, with .ejs preferred. getTemplate() provides the view's scope. 3) Listen to model events in index.js rather than views, and call sandbox.showContent() rather than view.render() on changes. 4) Marionette has specialized view types - ItemView renders a single model, CollectionView manages child views in a collection, CompositeView is a hybrid, and LayoutView

1. HOW I LEARNED TO STOP FUCKING
AND LOVE MARIONETTEJS
MADE WITH ♥ BY KAMOL TREEWATCHARARAT

2. THE WHY

3. The reason behind this talk
been working with marionette almost a month
Lots of gotchas and caveats
sum up what I think worth sharing to the team

4. VIEW

5. View life cycle
new View()
initialize()
render()
template/getTemplate()
onRender()

6. TEMPLATE: ???

7. TEMPLATE: ???
• js function
• require(‘file.ejs’)

8. TEMPLATE: ???
• js function <— take JSON in, spit out HTML
• require(‘file.ejs’)

9. TEMPLATE: ???
• js function <— take JSON in, spit out HTML
• require(‘file.ejs’) <— what we’re using now

10. GETTEMPLATE VS TEMPLATE
?

11. GETTEMPLATE VS TEMPLATE
getTemplate gives you the view’s scope
?

12. Should I implement render() ?
Yes No

13. Should I implement render() ?
Vanilla Backbone View —> Yes
Marionette’s Views —> use onRender() instead

14. View life cycle (cont.)
destroy()
onBeforeDestroy()
onDestroy()
unbind all custom view events
unbind all DOM events
remove this.el from DOM
unbind all listenTo

15. Where do I put event listener?
• initialize
• index.js
• onRender
• in model

16. Where do I put event listener?
• initialize <— put in event hash instead!
• index.js
• onRender
• in model

17. Where do I put event listener?
• initialize <— put in event hash instead!
• index.js <— ideal for model-related events
• onRender
• in model

18. Example
exports.showPage = function () {
var view = new View();
var model = new Model();
model.on( 'change', … )
view.listenTo( model, 'change', … )
}

19. Where do I put event listener?
• initialize <— put in event hash instead!
• index.js <— ideal for model-related events
• onRender <— bad place
• in model

20. Where do I put event listener?
• initialize <— put in event hash instead!
• index.js <— ideal for model-related events
• onRender <— bad place
• in model <— nope

21. Life’s most persistent and urgent question is, “Do
you have any question?”

22. MODEL

23. Setup
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});

24. model event
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});
model.set( 'val1', {
test: 0
});

25. model event
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});
model.set( 'val1', {
test: 0
});
Object { val1: { test: 0 } }

26. model event
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});
var val1 = model.get( 'val1' );
val1.share = 1;
model.set( 'val1', val1 );

27. model event
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});
var val1 = model.get( 'val1' );
val1.share = 1;
model.set( 'val1', val1 );
no trigger!!

28. model event
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});
var val1 = model.get( 'val1' );
val1.share = 1;
model.set( 'val1', val1 );
model.trigger( 'change', model );

29. model event
var model = new Backbone.Model();
model.set( 'val1', {
like: 1,
love: 2,
share: 0
});
model.on( 'change', function ( thisModel ) {
console.log( thisModel.attributes );
});
var val1 = _.clone( model.get( 'val1' ) );
val1.share = 1;
model.set( 'val1', val1 );

30. But… the memory

31. alternatives: avoid nested
data
use sub-model
flatten them

32. What takes longer? Model.fetch() vs View.render()
?

33. What takes longer? Model.fetch() vs View.render()
Model.fetch()
?

34. Should we use
model.on( 'change', this.render );
?

35. Should we use
model.on( 'change', this.render );
?
No, use sandbox.showContent instead.
except for subviews

36. MARIONETTE’S VIEWS

37. ItemView
enhanced version of Backbone.View
child view in a collection view
avoid adding stylesheet here

38. CollectionView
has no template ( you can put it in but it won’t get
called )
requires childView, and collection
can register childEvents
have to implement pagination events

39. CompositeView
inherit from CollectionView ( add in ItemView’s
features like template and stuffs )
is a hybrid of ItemView and CollectionView
require model, collection, childView

40. LayoutView
inherit from ItemView
has regions and regionManager

41. Q&A