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>
    );
  }
});

上層元件往子元件做資料傳遞

假設資料的異動都是在最上層元件
透過state的變化,取得最新的state所帶資料
再做render更新元件顯示

最上層元件在render程序內,由state取得的資料
設定到子元件的屬性上
子元件即可透過props來取得

父元件

var MyPage = React.createClass({
  ender: function() { 
    return (
      <div className="myPage">
        <MyList data={this.state.data}/>          
      </div>         
    );

  }
})

子元件

var MyList = React.createClass({
  render: function() {
    var _this = this
    return (      
      <div className="myList">
        {this.props.data.map(function(item) {
          return <MyItem key={item._id} data={item} />                 
        })}
      </div>
    );
  }
});

透過ajax設定init state資料

通常要設定componet預設顯示資料
會寫在getInitialState內
但若int state資料是需要透過ajax取得
因為ajax 非同步取得資料,是在callback內取得結果
所以無法直接用getInitialState來設定
而是在componentDidMount
時來處理

getInitialState: function() {
    return {data: []};    
},
componentDidMount: function() {
    var _this = this
    this.loadHistory(function(result){
      if(_this.isMounted()){
        _this.setState({
          data:result
        })
      };  
    
    })
  },