aureliaでオンザフライでdomオブジェクトを作成する

Question

私は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" 
     } 

私はこれは私がオーレリアでこれを表現する方法がわからない擬似コードである（このようなこと何かからビルドしたいと思い

：

<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>