Chrome React Tool 顯示Component 顯示 Unknow 處理

在Chrome React Develop Tool上
查看React Componet節點架構
發現會顯示為Unknow
只要在createClass時
加上 displayName 就可正確顯示了
例

SideBar = React.createClass
  displayName:"SideBar"
  render:->
    <div>
      <CatItem></CatItem>
      <SubCatItem>456</SubCatItem>
      <SingleCatItem>123</SingleCatItem>
    </div>

gulp coffee react jsx轉換的 bug

目前Project是以gulp做管理，寫的是ReactJS的JSX
當然還是要用Coffee來寫
但要可以正確compile 也就需要
先讓jsx可以在coffee內可以先轉換過
再把coffee compile成js
因此就需要用到coffee-react-transform來處理
再把它整到gulp的task內
又找到有人再把coffee-react-transform
再包裝成gulp-coffee-react-transform這樣的plugin
不過今天使用發現一個bug
是這plugin內與coffee-react-transform相依的版本太舊
會造成轉換錯誤

該轉成
React.createElement("div",..)
都變成了
eact.createElement(React.DOM.div,...

自然就掛了
解決的方法 其實只要進node_modules內
把gulp-coffee-react-transform內所用的
coffee-react-transform 版本換掉就可以了
不過還是發了個pull-request給作者

modal hide 在ios上的bug

使用bootstrap modal
當modal上有input field 在focus狀態時
若將modal hide
在android上同時會自動讓input field 失去focus
但在ios上 focus還是會繼續讓focus留在input上
而造成在ios上有modal關閉不完全的狀況

這部分需處裡在modal hide時
強制讓input field失去focus
也就是

$('input[type=text]').blur()

window.innerHeigh for ios bug

window.innerHeigh在android上可以抓到當時設備方向的高度
ios設備上則不管拿水平垂直,都會抓到device的高度
只要加上以下meta
即可正確取得當時方向的height

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

nodejs update gulp error

更新ndejs版本到0.12
gulp出現v8flags json 找不到的錯誤
只要重新安裝gulp即可解決

npm uninstall gulp -g
npm install gulp -g