Riot.jsのMixinの使い方

Question

このページなどを見ながらタグ間でオブジェクトを共有しようとしているのですが、うまくいきません。

・現状テストしているコード
・エラー箇所
・エラーメッセージ
は以下の通りです。
どこが間違っているのかご指摘お願いします。

//aaa.tag
var BodyMixin =  [
   {"tag": "h2", "class": "subheading", "main": "How to makeup"},
   {"tag": "p", "class": "text", "main": "First"},
   {"tag": "div", "class": "image", "main": "<img src=data:image/png;base64,iVBORw0KGgoA>"}
]
riot.mixin('bodyMixin', BodyMixin)//BodyMixinをbodyMixinとしてグローバルオブジェクトに登録

//bbb.tag
this.mixin('bodyMixin')//グローバルオブジェクトに登録したbodyMixinをbbb.tagの中でロード
console.log(bodyMixin)

エラー箇所：bbb.tagの一行目
エラーメッセージ：Uncaught Error: Unregistered mixin: bodyMixin

【追記】

グローバルに登録したいオブジェクトをtagの中ではなく、各モジュールを読み込むmain.js内に記述したら、bodyMixinをbbb.tagの中でロードではエラーは出なかったが、2行目で「Uncaught ReferenceError: bodyMixin is not defined」のエラーが発生してしまいました。

これはどういうことなのでしょうか？

//main.js
import riot from 'riot'
import './header.tag'
import './eyecatch.tag'
import './titleToKeyword.tag'
import './bodyText.tag'
import './raw.tag'

var BodyMixin =  [
	{"tag": "h2", "class": "subheading", "main": "How to makeup"},
	{"tag": "p", "class": "text", "main": "First"},
	{"tag": "div", "class": "image", "main": "<img src=data:image/png;base64,iVBORw0KGgoA>"}
]
riot.mixin('bodyMixin', BodyMixin)

riot.mount('header')
riot.mount('eyecatch')
riot.mount('titleToKeyword')
riot.mount('bodyText')
riot.mount('raw')

//bbb.tag
this.mixin('bodyMixin')//グローバルオブジェクトに登録したbodyMixinをbbb.tagの中でロード成功
console.log(bodyMixin)//Uncaught ReferenceError: bodyMixin is not defined

Answer 1

bodyMixinを読み込んでも、bodyMixinという名前のオブジェクトが追加されるわけではなく、bodyMixinの「中身」が追加されます。

var BodyMixin =  [
    {"tag": "h2", "class": "subheading", "main": "How to makeup"},
    {"tag": "p", "class": "text", "main": "First"},
    {"tag": "div", "class": "image", "main": "<img src=data:image/png;base64,iVBORw0KGgoA>"}
]
riot.mixin('bodyMixin', {
    bodyMixin: BodyMixin
})

とすればOKです。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
中身が追加されるということ知りませんでした。

ただ、いただいた通りに実行してみてもbbb.tagの2行目で同じbodyMixin is not definedのエラーが出てしまいました。
他にどこか誤りはありますでしょうか？

[syuilo]

console.log(this.bodyMixin)

でどうですか？

[退会済みユーザー]

確かにthisが必要でした。。
しっかり表示できました！
この部分で1日ずっと考え込んでしまっていたので、本当に助かりました。
ありがとうございます！！

あともう一点だけご質問させていただきたいのですが、グローバルオブジェクトに登録するBodyMixinなどの記述はaaa.tagなどのタグ内に記述することはできないのでしょうか？
（上記質問の追記の上のパターンです）

[syuilo]

そうですね、タグ内にグローバルなMixinを定義することはできません。追記してくださったように、各モジュールを読み込むmain.jsのような部分に記述する必要があります。

(できないこともないかもしれないけど(設計的に)やばそう)

[退会済みユーザー]

やはりそうなのですか。
ご丁寧かつ迅速に対応いただき、本当にありがとうございました。