in memories

早上四點多 天還沒亮
房間裡 是昏黃的燈光
阿嬤 已經起床要出門運動
這畫面一直在記憶裡30幾年

國小四年級 從苓雅區永康街的老家搬到鳳山
常跟我弟坐著公車回老家玩
玩累了 要回去
阿嬤總會給我們兄弟5塊,10塊零用錢
讓我們開開心心的回家

這幾年 阿嬤都躺在床上
也只有在逢年過節 我們才會去握握她的手 跟他說說話
現在閉上眼 還是能看到自己小小身影旁的她
R.I.P

underscore 樣板內的function變數傳遞

樣版裡的function
在使用underscore的樣板
可以在<%%>內放置js function
但function內無法讀取外部傳給template的資料
需在function外產生變數銜接
例petname是外部傳遞給template的變數
無法直接放到function內使用
所以建立一個暫存的變數_petname來轉傳

<%
_petname = petname;
function getContent(TEXT){       
    _content = TEXT.replace("name",_petname);
    console.log(_content);
    return _content;
}
%>

express實作RESTful CRUD,取得client傳遞的資料

express本身即支援restful 做CRUD的四個method
client端透過ajax傳遞資料給api取得參數的方式如下

一.get 讀取
  放在api url上的參數透過req.params.xx取得
  url上的query string則是透過req.query.xx取得

例
執行localhost:3838/api/prod/32?name=ozzy
app = express()
app.get '/api/prod/:id',(req,res)->
  _id = req.params.id #取到32
  _name = req.query.name #取到ozzy

二.post 新增
  透過post傳送的資料,透過req.body.xx取得

例
app.post '/api/prod/',(req,res)->
  _name = req.body.name

三.put 修改
  ajax put所傳送的資料,還是透過req.body.xx取得
  但注意ajax端傳送的content-type一定要是
  application/x-www-form-urlencoded
  如果是使用jquey.ajax送,其預設content-type即是

例
client端
$.ajax
  url:'localhost:3838/api/prod/33'
  type:'PUT'
  content-type:"application/x-www-form-urlencoded"
  data:
    name:'xxx'
  ...

api端
app.put '/api/prod/:id',(req,res)->
  _id = req.params.id
  _name = req.body.name

四.delete 刪除
  ajax delete要刪除資料,用用到的參數與get相同
  只會用到req.params.xx與req.query.xx

例
app.delete '/api/prod/:id',(req,res)->
  _id = req.params.id

jsx編譯設定與動態載入jsx

在Client端要依照頁面需求動態載入以jsx寫的component是不可行的
雖然在網頁上可以用

<script src ="js/app.js" type="text/jsx"></script>

方式載入jsx後再經過transformer來使用

但如果是要動態載入,是不可行的
需要將jsx先編譯成js
才能做動態載入
官網上也特別說明
不要在production上 用transformer來轉換jsx
還是要先編譯成js再使用
編譯只要執行
注意 官網上寫的 是有問題的 --watch 只會執行一次
要改成用-w 才會對每次jsx更新做編譯
並可另用-x jsx 指定 對jsx副檔名做編譯
把source以jsx當副檔名與 js做區隔

jsx -w -x jsx www/src/jsx/ www/js/

要編譯的jsx檔案,檔頭還是保留宣告

/** @jsx React.DOM */

子元件event往上層傳遞

當子元件的事件被觸發,需要通知上層物件,並往上傳遞資料
在上層元件的render內,設定好子元件的屬性用來處理子元件所傳遞上來的資訊

父元件

var MyBox = React.createClass({
  handleChildClick: function(comment) {
    ....
  },        
  render: function() {
    return (
      <div className="commentBox">
        <CommentForm onChildClick={this.handleChidClick} />
      </div>
    );
  }
});

在子元件的rende內真正html上設定事件的Handler
而在這handler內
以this.props.xxx()來執行被定義在這子元件上的handler
事件的傳遞方向事由子元件html->子元件->父元件
注意:一個元件上要指定有什麼prop,是在上層物件上指定的

子元件

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    ...
    this.props.onChildClick({author: author, text: text});
    ...
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});