Создание объекта dom на лету с aurelia

Question

Я довольно новичок в 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.

Answer 1

То, что вы пытаетесь сделать, может быть достигнуто в е самый простой способ, используя пример из документации -

this.items = [ 
    { type: 'something' }, 
    { type: 'somethingElse' } 
] 

<template repeat.for="item of items"> 
    <compose model.bind="item" view-model="widgets/${item.type}"></compose> 
</template> 

Если JSON не является массивом вы можете просто нажать его к массиву и динамического добавления и удаления его из DOM в любом случае.

Тогда у вас могут быть разные формы для редактирования каждого типа любого объекта JSON, который у вас есть, который имеет соответствующие поля ввода формы.

экс something.html -

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