我正在使用 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"
。
我可以绑定(bind) (1) Model.Address.City 或 (2) Model['Address']['City'],这是不可能的,因为表单是在运行时生成的。我想使用类似 (3) Model['Address.City'] 的东西,这样我就可以使用 Model[item.key] 进行绑定(bind)。有什么简单的语法可以实现这一点吗?
Angular Js 中类似应用的示例是 Angular Schema Form
提前致谢。
最佳答案
这可以通过了解如何处理键的绑定(bind)行为来实现。最终结果是绑定(bind)将像任何其他绑定(bind)表达式一样发挥作用。
这是一个例子: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';
}
动态表达式绑定(bind)行为.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;
}
}
关于javascript - 使用 Aurelia 的架构形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35887132/