Biểu mẫu lược đồ sử dụng Aurelia

Question

Tôi đang sử dụng Aurelia để xây dựng một hình thức năng động dựa trên một json. Biểu mẫu được tạo từ một json như sau:

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

Mô hình để điền vào biểu mẫu có sẵn thông qua dịch vụ API Web. Vì vậy, đến nay tôi đã thành công bằng cách sử dụng mẫu sau.

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

Bây giờ tôi đang gặp khó khăn, khi Mô hình chứa đối tượng khác làm tài sản. Ví dụ: đối với Thuộc tính, tôi muốn có hộp nhập cho Thành phố.

Do đó, item.key = "Address.City".

Tôi có thể liên kết với (1) Model.Address.City hoặc (2) Model ['Address'] ['City'] mà không thể làm mẫu được tạo khi chạy. Tôi muốn sử dụng một cái gì đó như (3) Mô hình ['Address.City'], để tôi có thể sử dụng Model [item.key] cho ràng buộc. Có cú pháp dễ dàng nào để đạt được điều này không?

Ví dụ về ứng dụng tương tự trong Angular Js là Angular Schema Form

Cảm ơn trước.

Answer 1

Điều này có thể được thực hiện bằng hành vi ràng buộc hiểu được phải làm gì với các phím. Kết quả cuối cùng là ràng buộc sẽ hoạt động giống như bất kỳ biểu thức ràng buộc nào khác.

Dưới đây là một ví dụ: 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'; 
} 

động thể hiện ràng buộc-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; 
    } 
}