javascript - 如何在 riotjs 中使用 each={} 正确引用 'nested' 标签

Question

我正在尝试使用加载标签的概念，我可以包装其他元素以在异步检索数据时提供一致的加载显示。考虑以下代码:

This example relies on browserify (require) but shouldn't make a difference to the question

<test>
    <loading>
        <ul>
            1. = <li each={ items }>{ title }</li>
            or
            2. = <li each={ parent.items }>{ title }</li>
            or
            3. = <li each={ opt.data.items }>{ title }</li>
        </ul>
    </loading>

    <script>
        require('riot');
        require('./loading.tag');

        this.items = [
            { title: 'title 1'},
            { title: 'title 2'}
        ];

        this.on('mount', function () {
            riot.mount('loading', /* for 3 = */ {data: this.items});
        })
    </script>
</test>

如你所见，标签是<test />并包含嵌套标签 <loading />包装内容 <test />显示。问题是我不确定引用项目数组的正确方法(在现实世界中将通过 ajax 引入)。我尝试了选项 1 和 2，但没有任何显示。 3 有效(将数据作为选项传递)但感觉不对。

可能与<yield />有关这是怎么回事<loading />正在显示其内容，但我不知道为什么。

<loading>
    <div><yield /></div>
</loading>

Answer 1

当我尝试你上面的代码 2 时得到了正确的结果。您的上述代码存在一些问题，可能会导致您出现问题。

1) 我从未在标签内部使用过 require。我怀疑它在需要标记文件时是否有效。 .tag 扩展名什么都不做。这是 type="riot/tag"表示脚本标签的不是 javascript，而是 riot 可以使用的特殊脚本。

2) 您已经关闭标签 </about>而不是 </test> .我认为您的防暴标签在这种情况下无法编译。

3) 我不知道你使用的是哪个版本的 riot，但在 2.3.12 中，如果你安装了测试标签，那么如果你已经加载，任何子项(在本例中是你的“加载”)都会自动安装.tag 文件。我认为问题是你在你的“加载”标签上调用了两次 mount，这可能会使他们与他们的 parent 离婚。

我认为您的问题是 <loading>当 <test> 时标签没有任何意义已安装。然后，您需要 loading.tag，它允许挂载 loading。尝试要求 <loading>在你安装测试之前。我做了一个 js 摆弄我会怎么做。希望这能回答您的问题。

https://jsfiddle.net/cm09mtc5/