2

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

这个例子依赖于browserify（要求）但不应该对问题产生影响

<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 />显示。问题是我不确定引用 items 数组的正确方法（在现实世界中将通过 ajax 拉入）。我尝试了选项 1 和 2，但没有任何显示。3 工作（将数据作为选项传递）但感觉不对。

它可能与<yield />如何<loading />显示其内容有关，但我不知道为什么。

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

1 回答 1

2

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

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

2）您已关闭标签</about>而不是</test>. 我认为您的 riot 标签在这些情况下无法编译。

3) 我不知道你使用的是什么版本的 riot，但在 2.3.12 中，如果你挂载了测试标签，那么如果你已经加载了 .tag，那么任何子项（在这种情况下是你的“加载”）都会自动挂载文件。我认为问题在于您在“加载”标签上调用 mount 两次，这可能会使他们与父母分离。

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

https://jsfiddle.net/cm09mtc5/

于 2016-01-25T07:59:55.523 回答