Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
FluxBone Mixin for React
module.exports =
ModelMixin: (model_name, event_name="all") ->
eventCallbackName = "_eventCallbacks_#{ model_name }_#{ event_name }"
mixin =
componentDidMount: ->
@props[model_name].on event_name,
@[eventCallbackName]
@
componentWillUnmount: ->
@props[model_name].off event_name,
@[eventCallbackName]
@
mixin[eventCallbackName] = () ->
setTimeout =>
@forceUpdate()
, 0
return mixin
CollectionMixin: (collection_name, event_name="all") ->
eventCallbackName = "_eventCallbacks_#{ collection_name }_#{ event_name }"
mixin =
componentDidMount: ->
@props[collection_name].on event_name,
@[eventCallbackName]
@
componentWillUnmount: ->
@props[collection_name].off event_name,
@[eventCallbackName]
@
mixin[eventCallbackName] = () ->
setTimeout =>
@forceUpdate()
, 0
return mixin
@rattrayalex
Copy link
Author

rattrayalex commented Oct 5, 2014

And to use:

MyComponent = React.createClass

  mixins: [
    FluxBone.CollectionMixin('todos', 'add remove reset')
    FluxBone.ModelMixin('user', 'change')
    React.addons.PureRenderMixin
  ]
  render: ->
    div {}, 
      "hello, #{ this.props.user.get('name') }, "
      "you have #{ this.props.todos.length } things to do."

@rattrayalex
Copy link
Author

rattrayalex commented Oct 5, 2014

Link to what I'm afraid of dealing with when trying to sync immutables with the server: https://github.com/rattrayalex/FluxBone_Example/tree/master/immutable_comparison

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment