javascript - Yield 内的 RiotJS 标签未更新

Question

我在使用yield和更新标签时遇到问题，请参见示例http://codepen.io/Pysta/pen/pEyoBY

<script type="riot/tag">
  <maintag>

    <yieldtag name='yield_tag'>
      <select>
        <option each={ items }>{ value }</option>
      </select>

    </yieldtag>


    var self = this;
    self.items = [
        {value:1},
        {value:2},
            {value:3},
        {value:4}
    ];
        self.items = [];

    this.on('mount', function () {
        var oReq = new XMLHttpRequest();
      oReq.addEventListener("load", reqListener);
      oReq.open("GET", "/api/category/0");
      oReq.send();
    });

    function reqListener(e) {
        console.log('load');
        self.items = [
        {value:1},
        {value:2},
            {value:3},
        {value:4}
      ];
        self.update(); 
    }

  </maintag>
</script>


<script type="riot/tag">
  <yieldtag>
    <yield />
  </yieldtag>
</script>

<maintag></maintag>

如果我立即加载数据(用“self.items = [];”注释行)，它会按预期工作，但是当我发出请求并异步更新它时，不会发生任何变化。

如果我从maintag内部删除yieldtag，它就会起作用。

任何帮助/建议表示赞赏。

Answer 1

如果你改变each={ items }至each={ parent.items }它将按预期工作

与 <yield /> 的混淆是你在 <maintag> 中编写模板逻辑，但是一旦安装了组件，您的代码实际上就在 <yieldtag> 中运行。 items数组存在于 <maintag> 的上下文中，即<yieldtag>挂载后的父级。

有关嵌套标签的更多信息，请参阅 Riot docs