Riot.jsのタブの中でアイコンを使用する方法を教えてください。

Question

<ul>
    <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }>{tab.title}</li>
</ul>
<div class="tabContent">
    <div each={ tab, i in tabs } class="tabContent__item { is-active: parent.isActiveTab(tab.ref) }">{tab.content}</div>
</div>

this.tabs = [
    { title: <i class='fa fa-picture-o' aria-hidden='true'></i>, ref: 'tab1', content: "aaa" },
    { title: 'Tab 2', ref: 'tab2', content: "bbb" },
    { title: 'Tab 3', ref: 'tab3', content: "ccc" }
]

this.activeTab = 'tab1'
isActiveTab(tab) {
    return this.activeTab === tab
}

toggleTab(e) {
    this.activeTab = e.item.tab.ref
    return true
}

HTML側に記述

上記のようなコードだと、JacaScript側の2行目にあるようにHTML表記のものを入れてしまうと、rollupでのコンパイル時にエラーが表示されてしまったため、下記のようにHTML側に記述する方法をいろいろ試してみたのですが、タブのコンテンツ側をうまく表示させることができなくて困っています。
現状、ロードした時点で、tab1のコンテンツも表示されない状況です。

また、toggleTab関数の方ではtab.refという変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。
どのようにすれば良いかわかる方、教えていただければと思います。

<ul>
    <li class="tabItem {is-active: parent.isActiveTab(tab1) }" onclick={ parent.toggleTab }> <span class='fa fa-picture-o' aria-hidden='true'></span> </li>
    <li class="tabItem {is-active: parent.isActiveTab(tab2) }" onclick={ parent.toggleTab }>Tab 2</li>
    <li class="tabItem {is-active: parent.isActiveTab(tab3) }" onclick={ parent.toggleTab }>Tab 3</li>
</ul>
<div class="tabContent">
    <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div>
</div>

this.activeTab = 'tab1'
isActiveTab(tab) {
    return this.activeTab === tab
}

toggleTab(e) {
    this.activeTab = e.item.tab.ref
    return true
}

2つの組み合わせ

<ul>
    <li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><i class="fa { tab.title }" aria-hidden="true"></i></li>
</ul>
<div class="tabContent">
    <div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div>
    <div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div>
</div>

this.tabs = [
    { title: 'fa-picture-o', ref: 'tab1' },
    { title: 'fa-picture-o', ref: 'tab2' },
    { title: 'fa-picture-o', ref: 'tab3' }
]

this.activeTab = 'tab1'
isActiveTab(tab) {
    return this.activeTab === tab
}

toggleTab(e) {
    this.activeTab = e.item.tab.ref
    return true
}

Answer 1

これか
title: '<i class="fa fa-picture-o" aria-hidden="true"></i>',
これ
title: '<i class=&quot;fa fa-picture-o&quot; aria-hidden=&quot;true&quot;></i>',
ではいかがでしょうか？

Comments

[退会済みユーザー]

またまたご回答ありがとうございます。

そちらも試してみたのですが、そもそも''で囲ってあると、文字列認識されてしまい、文字列をしてそのまま表示されてしまいます。
そして上下両方とも''を外すとコンパイル時にエラーが出てしまうという状況です。

[gin]

ああ、なるほどタグがそのまま表示されてしまうということですね。
エスケープを使ってみるのはどうでしょう？

title: '<i class=\"fa fa-picture-o\" aria-hidden=\"true\"><\/i>',

[退会済みユーザー]

そのまま
<i class="fa fa-picture-o" aria-hidden="true"></i>
と表示されてしまいました。。

本当にいろいろと申し訳ありません。

[gin]

こちらこそ大した知識なく思いつきで実験をさせてしまってすみません。
いろいろ思いつくので環境があれば自分で試してみるのですが…
「<」「>」もエスケープしてみたです…

title: '\x3ci class=\"fa fa-picture-o\" aria-hidden=\"true\"\x3e\x3c\/i\x3e',

これがダメなら共通部分はhtml側に書いて変数的な部分だけを文字列で扱って挿入するくらいですね…

[退会済みユーザー]

エスケープしても結果は変わりませんでした。。
HTML側に書くことにします。

本当にいろいろとありがとうございました。

[退会済みユーザー]

昨日もたくさんご質問させていただいて、時間が経ってしまってしまってからまたご質問させていただく形で申し訳ございません。

HTML側に記述する方法で今晩いろいろ試してみたのですが、タブのコンテンツ側をうまく表示させることができなくて困っています。
上記質問の「HTML側に記述」以下に自分のコードを貼り付けているのですが、何がいけないかわかりますでしょうか？
現状、ロードした時点で、tab1のコンテンツも表示されない状況です。

また、toggleTab関数の方ではtab.refという変数がなくなってしまったために、どうやってタブを切り替えるのかもわからなくなってしまいました。。
もしわかることがありましたら、教えていただければと思います。

[gin]

昨日と結構形変わってますね？
昨日のではダメだったんですか？
<ul>
<li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><span class="fa fa-picture-o" aria-hidden="true"></span>{tab.title}</li>
</ul>

[退会済みユーザー]

はい。。
そのようにしてしまうと、タブのコンテンツに「テキスト入力エリア」や「画像アップロードボタン」など、タブのタイトルによって表示を切り替えることができなくなってしまうためです。

タブのタイトル毎にアイコンを変更するだけなら「fa-picture-o」の部分のために、tabsの中にclassプロパティを作ればいいと思ったのですが。

[gin]

そこまでコンテンツの中身がガッツリあるようであればコンテンツの中身は普通にHTMLで記述し、切り替えのみをJSで行えばいい気がします。
2つの組み合わせですね。

<ul>
<li each={ tab, i in tabs } class="tabItem { is-active: parent.isActiveTab(tab.ref) }" onclick={ parent.toggleTab }><span class="fa fa-picture-o" aria-hidden="true"></span>{tab.title}</li>
</ul>
<div class="tabContent">
<div class="tabContent__item { is-active: parent.isActiveTab(tab1) }">(1) Lorem ispum dolor...</div>
<div class="tabContent__item { is-active: parent.isActiveTab(tab2) }">(2) Lorem ispum dolor...</div>
<div class="tabContent__item { is-active: parent.isActiveTab(tab3) }">(3) Lorem ispum dolor...</div>
</div>

[退会済みユーザー]

二つを組み合わせると質問内容に追加した「2つの組み合わせ」のようになると思うのですが、これではタブの中のコンテンツが表示されなくて困っています。。
どこか間違っていますでしょうか？

[gin]

コンテンツの方に「is-active」が付かなくて表示されないということですね。
たしかに。
アクティブになったタブの位置を取得して同じ位置のコンテンツに「is-active」を付与するって形でしょうね。
RiotJSの書き方がちょっと分からないので、別立てで分かる方に聞いた方がいいかも知れないです…

[退会済みユーザー]

そうですよね。
わかりました。本当にいろいろとありがとうございました。

[退会済みユーザー]

parent.isActiveTab(tab1)の部分をisActiveTab('tab1')に変更したら無事にできました。
eachを回さないためparentでアクセスしなくていいことと、tab.refが変数だったのに対してtab1は文字列なので表記を変更することが必要でした。
いろいろな組み合わせを試していたのですが、この組み合わせが漏れてしまっていたようです。。

本当にいろいろとありがとうございました。

[gin]

おー。よかったです。
形が全然違いますが参考にと思って拾って来たものとりあえず貼り付けておきます。
http://www.cyokodog.net/blog/riot/

[退会済みユーザー]

こちらも参考にさせていただきます。
最後までありがとうございました！