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