使用 Aurelia动态创建一个 dom 对象

Creating a dom object on the fly with aurelia

本文关键字：一个 dom 对象 Aurelia 动态 创建 使用      更新时间：2023-09-26

我对Aurelia很陌生，我不知道这在aurelia上是否可行。

我有一个包含多个结果的 json，

      "colors":[  
         {  
            "text":"#45454",
            "name":"background",
            "id":1,
            "type":"BackgroundColor"
         }
      "Description":[  
         {  
            "text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta sapien condimentum sagittis lobortis. Praesent molestie massa mi, eu volutpat libero condimentum in. Maecenas ultricies justo mi, eu vehicula nibh tristique vitae. Aliquam rhoncus ultrices fermentum. Duis id sapien efficitur, iaculis sapien non, laoreet felis. Aliquam dapibus commodo enim. Cras ultrices tempus justo, nec sagittis magna rutrum a.
Nullam porttitor varius lacinia. Aliquam eleifend ante tortor, non suscipit purus hendrerit eget. Ut sit amet elit mollis, venenatis tortor cursus, ornare ex. Aliquam egestas dui odio, quis malesuada ex feugiat in. Cras scelerisque, sem vitae maximus sagittis, velit orci pharetra libero, eget condimentum tortor neque in metus. Donec gravida fermentum imperdiet. Vivamus a lorem et metus maximus sollicitudin vitae eget lacus. Aliquam erat volutpat. Sed ultrices magna eget nunc venenatis porttitor. Nullam hendrerit ut mi et fermentum. Duis id sollicitudin tellus, a ultricies eros. Cras semper purus at convallis semper. Curabitur aliquet venenatis magna, a eleifend eros maximus eu. Duis ut iaculis velit, quis commodo urna. Quisque lacinia efficitur elit ut mollis.",
            "name":"description",
            "id":1,
            "type":"textarea"
         }

我想从中构建这样的东西（这是伪代码，我不知道如何在 aurelia中表示它：

<input type="color" value-bind="item.name:background" />
<textarea rows="5" type="text" class="form-control" value.bind="item.name:description"></textarea>

这意味着如果 type=BackgroundColor 等，我应该创建一个颜色输入，并将其链接到 json 的特定返回。

您可以使用文档中的示例以最简单的方式实现您正在尝试执行的操作 - 

this.items = [
  { type: 'something' },
  { type: 'somethingElse' }
]
<template repeat.for="item of items">
  <compose model.bind="item" view-model="widgets/${item.type}"></compose>
</template>

如果你的JSON不是一个数组，你可以把它推到数组中，然后用任何一种方式动态添加和删除它。

然后，您可以使用不同的表单来编辑您拥有的具有适当表单输入字段的任何 JSON 对象的每种不同类型的表单。

前某事.html - 

<input type="color" value-bind="item.name" />
<textarea rows="5" type="text" class="form-control" value.bind="item.description"></textarea>
相关文章：