2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?