从子标签到父标签的 Riotjs 数据

Question

我看了很多类似的问题，但仍然很难完成。 Try-d observable-s 但在某个地方搞砸了，无法完成。仍然是 riotjs 的新手

在子标签中，我有一个将数据推送到列表的函数：

<make-list>
...lots of html...
<script>
    var piclist = []; --after first function run this list has data
    ....
    done: function (e, data) {
                        piclist.push(data.result);
                    }
    ...
</script>
</make-list>

在父数据中，我想在函数中访问它

<main>
...lots of html..
<script>
riot.mount('make-list')

and i wana use that piclist = []; list here inside a function

</script>

</main>

Answer 1

您似乎想让 make-list 标签为 main 显示的列表创建列表项，make-list 是 child main.

您正在 parent 标签内使用 riot.mount('make-list')。这至少是非常不寻常的：它实际上触发了要安装的页面上的所有 make-list 标记。为什么不采用防暴方式并将其添加到 parent 的 html 部分，就像这样？

<main>
  ... lots of html ...
  <make-list opts={piclist} />

  <script>
    this.piclist = [];
  </script>
</main>

opts 允许您将数据传递给 child（在本例中是对列表的引用）。您可以像这样在 child 标签中访问它：

<make-list>
  ... lots of html ...
  <script>
    ...
      done: function (e, data) {
        this.opts.piclist.push(data.result);
      }
    ...
  </script>
</make-list>

希望对您有所帮助。

Answer 2

通过使用 mixin 这样完成了。也许这不是正确的方法，但它确实有效。

<main>
...lots of html..
<script>
riot.mount('make-list')

var piclist = [];
riot.mixin(piclist)


</script>

</main>
<make-list>
  ... lots of html ...
  <script>
    ...
      done: function (e, data) {
         piclist.push(data.result);
      }
    ...
  </script>
</make-list>

Answer 3

看看RiotComponent。它以直观的方式实现元素之间的通信。

从子标签到父标签的 Riotjs 数据

Riotjs data from child tag to parent tag

riot.js