Как правильно ссылаться на «вложенный» тег с каждым = {} в riotjs

Question

Я пытаюсь работать в концепции тега загрузки. Я могу обернуть другие элементы, чтобы обеспечить согласованное отображение загрузки при извлечении данных async. Рассмотрим следующий код:

Этот пример опирается на 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 />. Проблема в том, что я не уверен в правильности ссылки на массив элементов (который в реальном мире будет втягиваться через ajax). Я пробовал варианты 1 & 2, но ничего не отображалось. 3 работает (передаёт данные как опционы), но не чувствует себя хорошо.

Это может быть связано с <yield />, то есть как <loading /> отображает его содержимое, но я не знаю почему.

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

Answer 1

Когда я попробовал ваш код, код 2 получил правильный результат. У меня есть несколько проблем с указанным выше кодом, которые могут вызывать проблемы.

1) Я никогда не использовал требование внутри тега. Я сомневаюсь, что это работает, когда требуется файл тега. Расширение .tag ничего не делает. Это type="riot/tag", который сигнализирует, что тег скрипта не является javascript, а специальным скриптом, который может использоваться бунтом.

2) Вы закрыли тег </about> вместо </test>. Я думаю, что твой трюк не будет компилироваться в этих условиях.

3) Я не знаю, какую версию беспорядков вы используете, но в 2.3.12, если вы установите тестовый тег, тогда любые дети (в этом случае ваши «нагрузки») будут автоматически монтироваться, если вы уже загружен .tag-файл. Я думаю, проблема в том, что вы дважды вызываете mount на свой «нагрузочный» тег, что может развести их с родителями.

Я думаю, что ваша проблема в том, что тег <loading> ничего не значит, когда установлен <test>. Затем вам требуется загрузить.tag, который затем позволяет загружать, чтобы быть смонтированным. Попробуйте потребовать <loading> перед установкой теста. Я сделал скрипку, как бы я это сделал. Надеюсь, это ответит на ваш вопрос.

https://jsfiddle.net/cm09mtc5/