2015年7月25日土曜日

react.jsとjquery mobile

reactjsで書いたコンポーネントをjquery mobile風にしたくて試してみた。

まず単純に、react.jsのコードにjquery mobileのコードを書いてみた。
render()メソッドの中に書く。

<body>
<script type="text/jsx">
React.render(
        <ul data-role="listview">
          <li><a href="acura.html">Acura1</a></li>
          <li><a href="audi.html">Audi1</a></li>
          <li><a href="bmw.html">BMW1</a></li>
        </ul>
);
</script>
</body>

すると何も表示されない。

次に、htmlのbodyタグ直下に書いて見る。
<body>
    <div id="content"></div>
        <ul data-role="listview">
         <li><a href="acura.html">Acura</a></li>
         <li><a href="audi.html">Audi</a></li>
         <li><a href="bmw.html">BMW</a></li>
        </ul>
    </div>
<script>省略</script>
</body>
これはきちんと表示される。

react.jsもjquery mobileもタグのattributeを元に、domの操作をしているから、この辺の処理がバッティングしているのかもしれない。

調べてみたところ、jquery mobileが変換するclassを直に指定すれば出来るとの情報がstackoverflowにあった。なるほど。


やってみる。

<body>
<script type="text/jsx">
React.render(
   <ul class="ui-listview" data-role="listview" >
        <li class="ui-first-child"><a href="acura.html">Acura3</a></li>
        <li><a href="audi.html">Audi</a></li>
        <li class="ui-last-child"><a href="bmw.html">BMW</a></li>
   </ul>
);
</script>
</body>

ブラウザで再度確認する。今度は表示された。しかし、jquery mobileのスタイルではなく、ただのul要素として描画されている。つまり、class以下は無視されたようだ。

試しにstackoverflowで例として出されていたbuttonを表示してみる。

<body>
<script type="text/jsx">
React.render(
 <button className="ui-btn"/>
);
</script>
</body>

こちらはきちんとjquery mobile風で表示された。

出来るのと出来ないのがあるようだ。
listviewの場合は、それを含む外のdomもclass指定すれば出来たりするのだろうか。

ただ、いずれにせよいちいちclassを調べなければいけないのはだるすぎる。
あまりこの組み合わせは推奨出来るようなものではなさそうだ。



0 件のコメント:

コメントを投稿