奥里莉亚组成

Question

有关 Aurelia 的 <compose> 的快速问题元素。我本来希望用它来插入自定义元素作为表单控件，如下所示:

<!-- Loop through form controls -->
<div class="form-group" repeat.for="control of controls">
  <label><span t="${control.label}"></span></label>
  <compose view-model="resources/elements/${control.type}/${control.type}" 
    value.bind="control.value" data.bind="control.data" placeholder.bind="control.placeholder"></compose>
</div>

但是，它开始看起来像 <compose>元素仅限于仅接受 model , view-model和view参数。那是对的吗？传递 value 等参数的最佳方式是什么, data , placeholder我的自定义元素基于 control.type ？

使用我的解决方案进行编辑:

最后，Aurelia 的 <compose> 似乎出现了。仅适用于 view , view-model和model属性。我的解决方案是传递所有数据(可以是作为单个对象传递的多个项目)，如下所示:

<compose view-model="resources/elements/${control.type}/${control.type}" 
         model.bind="{'control': control, 'model': model, 'readonly': readonly}">
</compose>

我发现有趣的是，当您使用model.bind时，您不需要使用@bindable装饰器接收参数。它们可以立即在 View 中使用。

Answer 1

使用 model.bind 怎么样？

<!-- Loop through form controls -->
<div class="form-group" repeat.for="control of controls">
  <label><span t="${control.label}"></span></label>
  <compose view-model="resources/elements/${control.type}/${control.type}"
    model.bind="control"></compose>
</div>

然后， View 模型可以从其 model 属性访问 value、data 和 placeholder。