问React - Rails 5动作电缆

EN

  # app/assets/javascripts/components/records.js.coffee
  App.record = null
  @Records = React.createClass
    getInitialState: ->
      @setupSubscription()
      records: @props.data
    getDefaultProps: ->
      records: []
    setupSubscription: ->
      App.record = App.cable.subscriptions.create "RecordChannel",
        connected: ->
          console.log "connected to RecordChannel"
          # Timeout here is needed to make sure Subscription
          # is setup properly, before we do any actions.
          #setTimeout: ->
          #  this.perform 'follow',
          #               {message_id: this.message_id}
          #  ,1000
        received: (data) ->
          console.log "data received"
          @addRecord(data)
      #record_subs = App.record
    addRecord: (record) ->
      records = React.addons.update(@state.records, { $push: [record] })
      @setState records: records
    deleteRecord: (record) ->
      index = @state.records.indexOf record
      records = React.addons.update(@state.records, { $splice: [[index,1]] })
      @replaceState records: records
    updateRecord: (record,data) ->
      index = @state.records.indexOf record
      records = React.addons.update(@state.records, { $splice: [[index,1,data]] })
      @replaceState records: records
    credits: ->
      credits = @state.records.filter (val) -> val.amount >= 0
      credits.reduce ((prev, curr) ->
        prev + parseFloat(curr.amount)
      ), 0
    debits: ->
      debits = @state.records.filter (val) -> val.amount < 0
      debits.reduce ((prev, curr) ->
        prev + parseFloat(curr.amount)
      ), 0
    balance: ->
      @debits() + @credits()
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'
        React.DOM.div
          className: 'row'
          React.createElement AmountBox, type: 'success', amount: @credits(), text: 'Credit'
          React.createElement AmountBox, type: 'danger', amount: @debits(), text: 'Debit'
          React.createElement AmountBox, type: 'info', amount: @balance(), text: 'Balance'
        React.createElement RecordForm, handleNewRecord: @addRecord
        React.DOM.hr null
        React.DOM.table
          className: 'table table-bordered'
          React.DOM.thead null,
            React.DOM.tr null,
              React.DOM.th null, 'Date'
              React.DOM.th null, 'Title'
              React.DOM.th null, 'Amount'
              React.DOM.th null, 'Actions'
          React.DOM.tbody null,
            for record in @state.records
              React.createElement Record, key: record._id["$oid"], record: record, handleDeleteRecord: @deleteRecord, handleEditRecord: @updateRecord