Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Riot.jsその0006 親子関係とそのプロパティへのアクセス

制作 javascript riotjs

参考にさせて頂いたページ

Riot API

バージョン

Riot v2.0.15

riot-sample.htmlの記述内容

<body>
  <elm-example hoge="parent_value"></elm-example>
  <script src="./js/core/riot+compiler.js"></script>
  <script type="riot/tag" src="./js/tags/riot-sample.tag"></script>
  <script>
    riot.mount('elm-example');
  </script>
</body>

riot-sample.tagの記述内容

<elm-example>
  <div>
    parentのhoge : {this.opts.hoge}
    <br>
    parentからchildのname="name1"のhoge : {this.tags.name1.opts.hoge}
    <br>
    parentからchildのname="name2"のhoge : {this.tags.name2.opts.hoge}
  </div>
  <elm-children1 hoge="children1_value" name="name1"></elm-children1>
  <elm-children2 hoge="children2_value" name="name2"></elm-children2>
</elm-example>



<elm-children1>
  <div>
    children1:{this.opts.hoge}
    <br>
    children1からparentのhoge : {this.parent.opts.hoge}
  </div>
  <script>
    foo(){
      alert('foo');
      return 'foo';
    }
  </script>
</elm-children1>



<elm-children2>
  <div>
    children2:{this.opts.hoge}
    <br>
    children2からparentのhoge : {this.parent.opts.hoge}
  </div>
</elm-children2>

このソースコードについて

Riot API

によると、以下のソースコードは引用ですが

<my-tag>

  <child name="my_nested_tag"></child>

  // access to child tag
  var child = this.tags.my_nested_tag

</my-tag>

とか

<my-tag>

  <child name="my_nested_tag"></child>

  // access to child tag methods
  this.on('mount', function() {
    this.tags.my_nested_tag.someMethod()
  })

</my-tag>

でアクセス出来るらしいんだけど、undefinedになって、上手くできなかった。

実行するタイミングなのか、パスが違うのか。

this.tags.name1まではあるんだけども。