如何在 Riot.js 组件的 html 部分设置项目数组？

Question

我想在我的 riot 组件的 html 标签中声明动态列表，但不知道我做错了什么。在 another question 中找到数组的此语法，但在不同的上下文中。所以这就是我一直在尝试的：

<c-artworkdisplay
     extras= '[
         { "extra_name": "Featured on xy","extra_source": "xy.com" },
         { "extra_name": "Featured on zw","extra_source": "zw.com" }
     ]'>
</c-artworkdisplay>

.tag 本身应该没问题，因为当在安装脚本中声明数组时我可以管理它工作（我需要列表对于每个标签都是唯一的，所以这不是一个选项）。

Answer 1

从

转换您的标签

<c-artworkdisplay
     extras= '[
         { "extra_name": "Featured on xy","extra_source": "xy.com" },
         { "extra_name": "Featured on zw","extra_source": "zw.com" }
     ]'>
</c-artworkdisplay>

至

<c-artworkdisplay extras='{extras}'></c-artworkdisplay>

extras 将是我们的 list，它将动态更新。

并在安装标签之前定义 list extras。

this.extras = [
  { 
    extra_name: 'Featured on xy',
    extra_source: 'xy.com' 
  },
  { 
    extra_name: 'Featured on zw',
    extra_source: 'zw.com' 
  }
];

riot.mount('c-artworkdisplay');

标签将开始从定义的 extras 变量中读取内容。更改 extras 的内容后不要忘记调用 riot.update() 函数。

 this.extras.push({
    extra_name: 'Test',
    extra_source: 'test.com' 
});

riot.update();

在link中，您可以看到适合您情况的示例。

https://codepen.io/alihuseyn/pen/dmaRab

如何在 Riot.js 组件的 html 部分设置项目数组？

How can I set an array of items in the html part of my Riot.js component?

javascript

arrays

mount

riot.js

riot