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>

现在，当模型包含另一个对象作为属性时，我遇到了困难。例如，对于属性地址我想要一个City的输入框。

因此，item.key = "Address.City"。

我可以绑定（1）Model.Address.City或（2）Model ['Address'] ['City']，这是表单在运行时生成时不可能的。我想使用像（3）Model ['Address.City']这样的东西，这样我就可以使用Model [item.key]进行绑定。有没有简单的语法来实现这个目标？

Angular Js中类似应用的示例是Angular Schema Form

提前致谢。

Answer 1

这可以通过一种能够理解如何处理键的绑定行为来实现。最终结果是绑定将像任何其他绑定表达式一样起作用。

以下是一个例子：https://gist.run?id=720d20b2db5adba92f62f7e665cf3b96

<强> app.html

select *, count(Passed?) as passedTotal from table where Passed? = 1 and passedTotal=2 group by Name

<强> app.js

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

<强>动态表达结合-behavior.js

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

  key = 'address.city';
}

使用Aurelia的架构表单

1 个答案: