2014年11月25日 星期二

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

2014年11月23日 星期日

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

2014年11月15日 星期六

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 */

2014年11月2日 星期日

子元件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
        })
      };  
    
    })
  },

2014年9月12日 星期五

Cannot enqueue Handshake after invoking quit 錯誤處理

nodej 使用mysql, 只要mysql.createConnection 就可操作 不須再用 connection.end connection.start 否則可能會有 Cannot enqueue Handshake after invoking quit 的錯誤

2014年8月24日 星期日

8/24 far away taipei

不知道五歲時的記憶,長大後還能記得多少。我貪心的想帶你把我們曾經去過的地方都再走一遍,塞給你滿滿的回憶,不要忘記

2014年6月25日 星期三

git 移除 dash名稱目錄處理方法

當在git repository內有以dash(-)為首的目錄
要對其做git指令處理,都會發生錯誤
因為在下git指令時 -會被判斷為git command的參數
處理方法是要先將該目錄名稱改掉才能做後續處理
更名時需以絕對路徑的方式修改
例 要將-w這目錄移除,需先更名後再做移除
git  mv /vagrant/xxx/-w/ /vagrant/xxx/w/
git rm -rf w

2014年6月15日 星期日

git ignore排除既有檔案

要將已經在git內的檔案或目錄做排除
除了在gitignore上加上設定外
一定要先將要排除的檔案刪除
做一次commit到server上
之後被排除的檔案就不會再跑出來了

2014年4月24日 星期四

PhoneGap Developer App

PhoneGap提供了在開發app的方便工具
可以即時在device上即時預覽正在開發的project
不需要build成apk再insall到device上
只要在PC端
app project內執行
phonegap serve
即可

如果是用其他的framework所產生的project
若無法運作
大多是因為少了.cordova這個目錄
phonegap 是認這目錄來辨識app
可利用
phonegap create myApp
產生一個空白的project
然後將目錄內的.cordova目錄copy出來
即可

http://phonegap.com/blog/2014/04/23/phonegap-developer-app/


2014年1月23日 星期四