今回はRiot.jsのコンポーネントのロジック内で使用できる各種インスタンスプロパティを紹介します。
opts
this.opts
はマウント時に外部から渡される値が格納されています。
riot.mount関数から渡す
riot.mount('sample', {title: 'Riot.js入門'})
このように第二引数(第一引数にマウントさせるHTML Elementを渡してる場合は第三引数)に渡すと this.opts.title
に値が入ります。
入れ子から渡す
<sample title="Riot.js入門" />
このようにアトリビュートに渡すと、こちらも同様に this.opts.title
に値が入ります。
root
this.root
は自身のHTML Elementが入ります。
parent
this.parent
は入れ子限定のプロパティで、自身を入れ子にしている親インスタンスが入ります。
tags
this.tags
は入れ子の子インスタンスが入ります。
sample.tag
<sample>
<div data-is="a"></div>
<div data-is="b"></div>
<div data-is="b"></div>
<script>
console.log(this.tags.a); // RiotTagインスタンス
console.log(this.tags.b); // RiotTagインスタンスの配列
console.log(this.tags.b[0]); // RiotTagインスタンス
</script>
</sample>
this.tags.カスタムタグ名
でアクセスでき、同じカスタムタグがマウントされている場合は配列になります。
名前付き要素
name
または id
アトリビュートのある要素は、JavaScriptから簡単にアクセスできるよう、自動的にコンテキストに追加されます。
sample.tag
<sample>
<div id="home"></div>
<input name="inputer" value="test"></p>
<script>
console.log(this.home); // DivのHTML Element
console.log(this.inputer.value); // InputのHTML Elementのvalue値
</script>
</sample>