Aureliaを使用するスキーマフォーム

Question

私は、Aureliaを使用してjsonに基づいて動的フォームを作成しています。フォームは、次のようなjsonから生成されています。

Schema = [{ 
    'key': 'Name', 
    'display': 'Name', 
    'type': 'text', 
    'placeholder': 'Name', 
    'required': true 
}, 
{ 
    'key': 'IsSubscribed', 
    'display': 'Subscribed to newsletter?', 
    'type': 'checkbox', 
    'placeholder': null, 
    'required': false 
}]; 

フォームを記入するモデルは、Web APIサービスから入手できます。だから、私は以下のテンプレートを使って成功しました。

<template> 

    <section class="au-animate"> 
    <h2>Edit Form</h2> 
    <form class="form-group"> 
     <div repeat.for="item of Schema" class="form-group"> 
      <label if.bind="item.type === 'text' || item.type === 'checkbox'" class="control-label" for.bind="item.key">${item.display} 
       <input class="form-control" id.bind="item.key" placeholder.bind="item.placeholder" type.bind="item.type" value.bind="Model[item.key]" />  
      </label> 
      <label if.bind="item.type === 'textarea'">${item.display} 
       <textarea placeholder.bind="item.placeholder" value.bind="Model[item.key]></textarea> 
      </label> 
      ... 
     </div> 
    </form> 
    </section> 

    </template> 

モデルにプロパティとして別のオブジェクトが含まれているときに、私は困難に直面しています。たとえば住所のプロパティの場合は、都市の入力ボックスを希望します。

したがって、item.key = "Address.City"。

実行時にフォームが生成されるため、（1）Model.Address.Cityまたは（2）Model ['Address'] ['City']とバインドできません。私は（3）Model ['Address.City']のようなものを使いたいので、バインディングにModel [item.key]を使うことができます。これを達成するための簡単な構文はありますか？角度のJsに同様のアプリケーションの

例予めAngular Schema Form

おかげです。

Answer 1

これは、キーを使って何をすべきかを理解しているバインド動作で実現できます。最終結果は、バインディングは他のバインディング式と同様に機能します。

ここ例です：https://gist.run?id=720d20b2db5adba92f62f7e665cf3b96

app.html

<template> 
    <require from="./dynamic-expression-binding-behavior"></require> 

    <label> 
    Address 1: 
    <input value.bind="model & dynamicExpression:'address.address1'"> 
    </label> 
    <label> 
    Address 2: 
    <input value.bind="model & dynamicExpression:'address.address2'"> 
    </label> 
    <label> 
    City: 
    <input value.bind="model & dynamicExpression:key"> 
    </label> 
    <label> 
    State: 
    <input value.bind="model & dynamicExpression:'address.state'"> 
    </label> 
    <label> 
    Zip: 
    <input value.bind="model & dynamicExpression:'address.zip'"> 
    </label> 
</template> 

app.js

export class App { 
    model = { 
    address: { 
     address1: '1 Main Street', 
     address2: '', 
     city: 'Burlington', 
     state: 'VT', 
     zip: '05401' 
    } 
    }; 

    key = 'address.city'; 
} 

ダイナミック発現結合behavior.js

import {inject} from 'aurelia-dependency-injection'; 
import {Parser} from 'aurelia-binding'; 
import {rebaseExpression} from './expression-rebaser'; 

@inject(Parser) 
export class DynamicExpressionBindingBehavior { 
    constructor(parser) { 
    this.parser = parser; 
    } 

    bind(binding, source, rawExpression) { 
    // Parse the expression that was passed as a string argument to 
    // the binding behavior. 
    let expression = this.parser.parse(rawExpression); 

    // Rebase the expression 
    expression = rebaseExpression(expression, binding.sourceExpression); 

    // Squirrel away the binding's original expression so we can restore 
    // the binding to it's initial state later. 
    binding.originalSourceExpression = binding.sourceExpression; 

    // Replace the binding's expression. 
    binding.sourceExpression = expression; 
    } 

    unbind(binding, source) { 
    // Restore the binding to it's initial state. 
    binding.sourceExpression = binding.originalSourceExpression; 
    binding.originalSourceExpression = null; 
    } 
}