質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.48%

Riot.js innerHTMLでテキストにhtmlタグをつけて表示させる

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,879

score 7

 前提・実現したいこと

少し前にこちらで質問させて頂き、回答を頂いたのですがまだまだ知識が足りないようで
解決できません。
もう一度質問させてください。

https://teratail.com/questions/111207

 発生している問題・エラーメッセージ

InnterHTMLをつかう、ということアドバイスを頂き試しデモは記事の内容をコピーしてみたのですが、こちらの環境に合わせてみるとうまくいきません。

this.message.innerHTML = 
this.message.innerHTML = 

innterHTMLががそのまま文字列として表示されており、<p>テキスト111</p>の中身がありません。

 試したこと

sample.tagというカスタムタグを読み込んでindex.htmlに表示させる。
each={}で配列を表示。

sample.tag 

<sample>
  <div each={list}>
    <div id='message'></div>
    this.message.innerHTML = {list.content} 
  </div>
</sample>

this.list = [
  {content:'<p>テキスト111</p>'} ,
  {content:'<p>テキスト2222</p>'}         
  ]

index.html

<html>
  <body>
    <sample></sample>
    <script type="riot/tag" src="sample.tag"></script>
    <script src="https://cdn.jsdelivr.net/npm/riot@3.8/riot+compiler.min.js"></script>
    <script>riot.mount('sample')</script>
  </body>
</html>


```

 補足情報

補足

this.message.innerHTML = {this.content} とすると

this.message.innerHTML = <p>テキスト1111</p>
this.message.innerHTML = <p>テキスト2222</p>

と表示されます。

どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

<div>の中にコードを書いているので、HTMLの一部として認識されてしまっています。

JavaScriptはカスタムタグ内の一番最後にそのまま書く、あるいは最後の方に<script>で囲んで書く必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/31 19:59

    maisumakun 様、前回に引き続きアドバイス本当にありがとうございます。

    <sample>
    <div each='{list}'>
    <div class="panel-body">
    <div id="message"></div>
    </div>
    </div>
    <script>
    this.message.innerHTML = {this.content}
    </script>
    </sample>

    this.list = [
    {content:'<p>テキスト1111</p>'},
    {content:'<p>テキスト2222</p>'}
    ]
    としたとろ、画面は何も表示されず
    sample.tag.js:2 Uncaught SyntaxError: Unexpected token . とコンソールに出ていました。

    this.message.innerHTML = {content} とすると not definedのエラーです。

    公式を参考に次のように変えてみたところ惜しいところまできましたが、
    Keyを使いたいので解決にはなりません。

    <raw>
    <span></span>
    this.root.innerHTML = opts.content
    </raw>


    <sample>
    <div each='{html}'>
    <raw content="{ html}"/>
    </div>

    this.html = [
    '<p>テキスト1111</p>',
    '<p>テキスト2222</p>'
    ]
    </sample>

    キャンセル

0

こちらではどうでしょうか?
2パターン書きましたが、どちらもkeyを使っています。

plunker

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る