Skip to content

Instantly share code, notes, and snippets.

@leoasis
Last active March 7, 2019 16:00
Show Gist options
  • Save leoasis/9701509 to your computer and use it in GitHub Desktop.
Save leoasis/9701509 to your computer and use it in GitHub Desktop.
React vs Marionette + Rivets
var List = Backbone.Marionette.CollectionView.extend({
itemView: Item,
tagName: 'ul'
});
var Item = Backbone.Marionette.ItemView.extend({
tagName: 'li',
template: function(data) {
return '<span rv-text="model.name"></span><p rv-text="model.description"><p>';
},
onRender: function() {
this.binder = rivets.bind(this.el, { model: this.model });
},
onClose: function() {
if (this.binder) this.binder.unbind();
}
});
var List = React.createClass({
mixins: [React.Backbone],
updateOnProps: { 'items': 'collection' },
render: function() {
var items = this.props.items.map(function(item) {
return <Item item={item} key={item.cid}/>
});
return <ul>{ items }</ul>;
}
});
var Item = React.createClass({
mixins: [React.Backbone],
updateOnProps: { 'item': 'model' },
render: function() {
return <li><span>{ this.props.item.get('name') }</span><p>{ this.props.item.get('description') }</p></li>;
}
});
React.Backbone = {
listenToProps: function(props) {
_.each(this.updateOnProps, function(events, propName) {
switch(events) {
case 'collection':
events = 'add remove reset sort';
break;
case 'model':
events = 'change';
}
this.listenTo(props[propName], events, function() { this.forceUpdate(); })
}, this)
},
componentDidMount: function() {
this.listenToProps(this.props);
},
componentWillReceiveProps: function(nextProps) {
this.stopListening();
this.listenToProps(nextProps);
},
componentWillUnmount: function() {
this.stopListening();
}
}
_.extend(React.Backbone, Backbone.Events);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment