LoginSignup
2
1

More than 5 years have passed since last update.

Riot.js でTagに大文字を使うときの罠

Posted at

tl;dr

riot.mount('#myid', 'UpperCaseTag')したら
riot.min.js:2 Uncaught TypeError: Cannot read property 'class' of undefinedってエラーになったら
riot.mount('#myid', 'uppercasetag')でトライしてください。

問題

大文字が使われているタグ(例えばUpperCase.tag)をriot.mount('#myid', 'UpperCase')とするとエラーが出ます。

解決法

  • タグに大文字を使わないようにしましょう。
  • もし大文字が含まれているタグを使う場合はriot.mount('#myid', 'uppercase')というように小文字に変えましょう。
  • また、riot.mount('UpperCase') として<UpperCase></UpperCase>とすることで罠から抜け出せます。

サンプル

sample.html
<!doctype html>

<html>
  <body>
    <script src="UPPER.tag" type="riot/tag"></script>
    <script src="lower.tag" type="riot/tag"></script>
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>

    <UPPER></UPPER>
    <lower></lower>

    <div id="myid1"></div>
    <div id="myid2"></div>

    <script>
      riot.mount('lower'); // Both lower and upper cases are ok
      riot.mount('UPPER'); // when selector is not used

      riot.mount('#myid1', 'lower');
      // riot.mount('#myid2', 'UPPER'); Upper case tag name is not working
    </script>

  </body>
</html>

Plunkerでデモできます。
http://plnkr.co/edit/CX2tdf5AvO6cJkDZINGn?p=info

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1