React.js + Parse 實做簡易留言板

 1###
 2# GuestBook
 3#
 4# @cjsx React.DOM
 5###
 6
 7React = require 'react'
 8
 9Comments = require './Comments.cjsx' # 這之後會實作
10CommentForm = require './CommentForm.cjsx' # 同上
11
12module.exports = React.createClass {
13  render: ->
14    (
15      <div>
16        <CommentForm />
17        <Comments />
18      </div>
19    )
20}

 1###
 2# Comment Form
 3#
 4# @cjsx React.DOM
 5###
 6
 7React = require 'react'
 8
 9CommentAction = require '../actions/CommentAction.coffee' # 後面會實作 Comment Action
10
11module.exports = React.createClass {
12  getInitialState: ->
13  	# React.js 的 State 都需要「事先定義」才能夠使用
14    {
15      content: ""
16    }
17
18  _onSubmit: (e) -> # 處理 Submit 的方法（收到的 e 就跟原生 JavaScript 拿到的 Event 是相同的）
19    CommentAction.create(@state.content) # 呼叫 Action 執行某個任務（新增留言）
20    @setState { content: "" }
21
22    e.preventDefault() # 取消原有的表單送出動作
23
24  _onChange: (e) ->
25    # 這算是一種小技巧，我們會發現在 _onSubmit 方法要取得 textarea 的內容是很困難的
26    # 因此就隨時將表單內容存到狀態中（再次時做表單處理）用於送出時使用
27    # 不過要注意的是後面的 textarea 設定了 value={@state.content} 可以確保使用者輸入的跟送出的結果是相同的
28    @setState { content: e.target.value }
29
30  render: ->
31    (
32      <div>
33        <form onSubmit={@_onSubmit}>
34          <textarea onChange={@_onChange} placeholder="Messages..." value={@state.content}></textarea>
35          <button type="submit">Submit</button>
36        </form>
37      </div>
38    )
39}

 1###
 2# Comments
 3#
 4# @cjsx React.DOM
 5###
 6
 7React = require 'react'
 8
 9CommentStore = require '../stores/CommentStore.coffee' # 後面也會實作 Store 的部分
10CommentAction = require '../actions/CommentAction.coffee'
11
12CommentItem = require './CommentItem.cjsx'
13
14module.exports = React.createClass {
15  getInitialState: ->
16    {
17      comments: CommentStore.getAll() # 初始化的時候從 Store 拿出目前儲存的資料
18    }
19
20  _onChange: ->
21    @setState { comments: CommentStore.getAll() } # 更新目前儲存的資料
22
23  componentDidMount: ->
24    CommentAction.load() # 在元件被加入到頁面上時呼叫「讀取」動作進行 API 查詢
25    CommentStore.addChangeListener @_onChange # 向 Store 登記「變更」事件以了解資料更新
26
27  componentWillUnmount: ->
28    CommentStore.removeChangeListner @_onChange # 當元件即將被移除時也解除事件監聽
29
30  generateCommentsItem: ->
31    # React.js 動態產生元件可以透過陣列的方式呈現，而每個元素則要給予一個 key 屬性
32    # 這邊將狀態中儲存的留言資訊依序取出，然後放入對應的屬性
33    # 這邊的 data.get() 用法是 Parse API 存取屬性的方式（一般情況使用 data.content 就可以了）
34    @state.comments.map (data) -> 
35      <CommentItem key={data.id} content={data.get('content')} createTime={data.get('time').toString()} />
36
37  render: ->
38    (
39      <div>
40        {@generateCommentsItem()}
41      </div>
42    )
43}

 1###
 2# Comment Item
 3#
 4# @cjsx React.DOM
 5###
 6
 7React = require 'react'
 8
 9module.exports = React.createClass {
10  render: ->
11    (
12      <div>
13        <p>{@props.content}</p>
14        <footer>
15          <span>{@props.createTime}</span>
16        </footer>
17      </div>
18    )
19}

 1
 2###
 3# Dispatcher
 4###
 5
 6Dispatcher = require('flux').Dispatcher
 7
 8# 簡單說就是做物件的繼承，在 Facebook 的範例會看到使用 Object.assign 去輔助
 9# 不過 Dispatcher 也可以利用 CoffeeScript 提供的 extends 來做擴充
10# 後面的 Store 會因為要從 EventEmitter 的 prototype 繼承而無法做這件事情
11# 關於 Object.assign 的用途，可以參考 ES6 相關文章的介紹
12
13class AppDispatcher extends Dispatcher
14  handleViewAction: (action) -> # 擴充一個 handleViewAction 用來處理跟 View 相關的動作（大多數時候也只會有這一個）
15    @dispatch { # 觸發某些動作
16      source: 'VIEW_ACTION' # 看到用全部大寫的物件，請合理猜測是使用 Constant 的時機（這邊文章都會用一般字串帶過）
17      action: action # 將收到的動作物件一併傳給 Store
18    }
19
20module.exports = new AppDispatcher

 1
 2###
 3# CommentStore
 4###
 5
 6# 利用 browserify 的功能，讓我們可以將 EventEmitter 在瀏覽器上實作（這個非常好用）
 7EventEmitter = require('events').EventEmitter 
 8# 如果是使用 ES6 就不需要這個輔助套件
 9assign = require 'react/lib/Object.assign' 
10
11AppDispatcher = require '../Dispatcher.coffee'
12
13_comments = [] # 這邊用一個 Array 實作陣列的儲存（大多數時候從 API 撈出來也都是陣列，排序上可以依靠 API 而不需要自己處理，反而是專注在容易呈現會更好）
14
15dispather = (payload) -> # 向 Dispatcher 登記需要一個處理程序，這部分就是在定義當 Dispatcher 被觸發時應該做什麼動作
16	# 取出 Action 物件
17  # Action 物件包含什麼都是看開發者高興的，只是我們通常會給一個 actionType 屬性
18  action = payload.action 
19
20  switch action.actionType # 透過 actionType 屬性判斷該做什麼動作
21    when 'COMMENT_CREATE' # 這邊就是該用 Constant 的時候（這個範例會略過這個步驟）
22      _comments.unshift action.comment # 在留言資料的最前面插入一筆（預設是逆序排序）
23      CommentStore.emitChange() # 讓 Store 觸發 Change 事件通知 View 重新讀取
24
25    when 'COMMENT_LOAD'
26      _comments = action.comments # 跟上面的 CREATE 不同，這次 action 包的是 comments （所有留言）
27      CommentStore.emitChange() # 一樣要觸發 Change 事件讓 View 重新讀取
28      
29  return true # 這是非常重要的一行，如果沒有傳回 true 的話 Dispatcher 會判定任務失敗（Ex. 使用 waitFor 時造成中斷）
30
31# 這邊是將 EventEmitter.prototype 複製到一個空物件（並且作為我們後來的 Store）另一部分複製的就是我們目前正準備定義的方法
32CommentStore = assign {}, EventEmitter.prototype, {
33  getAll: ->
34    _comments
35
36  emitChange: ->
37    @emit 'CHANGE'
38
39  addChangeListener: (callback) ->
40    @on 'CHANGE', callback
41
42  removeChangeListener: (callback) ->
43    @removeListener 'CHANGE', callback
44
45  dispatherIndex: AppDispatcher.register( dispather ) # 向 Dispatcher 登記（會拿到一個 ID 之後可以用於 watiFor 的應用）
46}
47
48module.exports = CommentStore

 1###
 2# Comment Action
 3###
 4
 5AppDispatcher = require '../Dispatcher.coffee'
 6
 7Comment = Parse.Object.extend("Comment")
 8
 9module.exports = {
10  load: ->
11    query = new Parse.Query(Comment)
12
13    query.descending('time').find({ # 排序上利用 Parse API 處理，而不是在 Store 中人工解決
14      success: (results)->
15        AppDispatcher.handleViewAction { # 讓 Dispatcher 送出一個任務
16          actionType: 'COMMENT_LOAD'
17          comments: results
18        }
19    })
20
21  create: (content) ->
22    comment = new Comment
23    comment.save {
24      content: content,
25      time: new Date()
26    }
27    .then (object) ->
28      AppDispatcher.handleViewAction {
29        actionType: 'COMMENT_CREATE'
30        comment: object
31      }
32}

 1###
 2# Application
 3#
 4# @cjsx React.DOM
 5###
 6
 7React = require 'react'
 8
 9Guestbook = require './components/GuestBook.cjsx'
10
11Parse.initialize("Application ID", "JavaScript Key");
12
13window.onload = ->
14  React.render <Guestbook />, document.body

1React.render <Header />, document.getElementById("header")
2React.render <Main />, document.getElementById("main")
3React.render <Footer />, document.getElementById("footer")