Riot.jsのイベント発火について

Question

以下のようなコードを書いているのですが、onMouseとoffMouseの関数がなぜか動きません。
そして、onmouuseoverを指定している要素にカーソルを持っていくと「Uncaught ReferenceError: onMouse is not defined」というエラーが発生します。（onmouseoutも同様）。

いろいろ試行錯誤しているのですが、どうもうまくいかないため、わかる方教えて下さい。

<div class='bodyTextWrapper'>
    <!--テキストエリアに入力したテキストを表示-->
    <raw content="{'<div><' + body.tag + ' ' + 'class=&quot;' + body.class + '&quot; onmouseover={onMouse} onmouseout={offMouse}>' + body.main + '</' + body.tag + '><div show={show}>delete</div></div>'}" name='content'  each={ body, i in bodyMixin.bodyContents } />

    <!--テキストエリア-->
    <div class='inputArea'>
        <div>
            <label>
                <textarea name='text' placeholder='Input Text'></textarea>
                <button onclick={ addText }>add</button>
            </label>
        </div>
</div>   

this.mixin('bodyMixin')
this.bodyMixin.bodyContents = []

addText(e) {
    var bodyContent = { tag: 'p', class: 'text', main: this.text.value}
    this.bodyMixin.bodyContents.push(bodyContent)
    this.text.value = ''
    this.update()
    console.log(this.bodyMixin.bodyContents)
}

//「1」は表示されず、この関数は動いていない
//this.on('update', function(){}で括ってもうまくいかず
onMouse(e) {
    this.show = true
    console.log('1')
}
//「2」は表示されず、この関数は動いていない
offMouse(e) {
    this.show = false
    console.log('2')
}

ちなみにディベロッパーツールで確認すると、テキストエリアに入力されたテキストの表示部分は以下のようになっています。

<raw name="content" content="<div><p class=&quot;text&quot; onmouseover={onMouse} onmouseout={offMouse}>adfa</p><div show={show}>delete</div></div>"><div><div show="{show}">delete</div><p class="text" onmouseover="{onMouse}" onmouseout="{offMouse}">入力内容</p></div></raw>
    <p class="text" onmouseover="{onMouse}" onmouseout="{offMouse}">入力内容</p>
    <div show="{show}">delete</div>
</raw>

Answer 1

素人考えですけどこれでどうでしょうね？
onmouseover="{onMouse}"→onmouseover={onMouse}

Comments

[退会済みユーザー]

riotではonmouseover={onMouse} がonmouseover="{onMouse}"に自動変換されるため、ディベロッパーツールでは""付きで表示されているのだと思います。。
上のHTMLでは""でプログラムを書いていますし。

[gin]

どこ見ても「””」なしばかりなのでこれかなと思ったんですが公式を見ると勝手に「""」で囲まれるよって書いてますね。失礼しました。

また思いつきでの投稿ですが、これは動きます？
（似たような感じのやつを拾ってちょこっと直してみただけ）

this.onMouse = function(e) {
this.show = true
console.log('1')
}

[退会済みユーザー]

いえいえいつもわざわざ調べてまでも回答いただき、感謝しています。

そちらでもやはり関数は動きません。
おそらく、HTMLの方をなんとかいじらないとダメそうです。

Answer 2

rawを用いて文字列としてHTMLをレンダリングしているのが原因かもしれません。
文字列内のHTMLを別タグとして分離してみるとかどうでしょう。

Comments

[退会済みユーザー]

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

申し訳ないのですが、まだ独学でプログラミングを始めたばかりということもあり、「別タグとして分離してみる」というのがどういったことをすればいいのかわからないのですが、具体的にどういったことをするのでしょうか？

いつもお手数おかけして申し訳ないありません。