Riot.js入門-4

今回は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>