如何在 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>。我认为您的 riot tag 在这种情况下无法编译。~~

3) 我不知道你使用的是哪个版本的 riot，但在 2.3.12 中，如果你安装测试标签，那么任何 children（在这种情况下你的 "loadings"）如果您已经加载了 .tag 文件，它将自动挂载。我认为问题是你在你的 "loading" 标签上调用 mount 两次，这可能会使它们与它们的 parent.

分离

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

https://jsfiddle.net/cm09mtc5/

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

How to correctly reference 'nested' tag with each={} in riotjs

javascript

riot.js