奥里利亚组成

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装饰器来接收参数。它们在视图中立即可用。

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 可以从其 model 属性.[=15= 访问 value、data 和 placeholder ]

Answer 2

<compose> 可以访问外部范围，因此您无需绑定任何内容。这应该有效：

用法

<compose view-model="resources/elements/${control.type}/${control.type}"></compose>

HTML

<template>${propertyFromParent}</template>

运行示例 https://gist.run/?id=8bb9c5503b4bbb7923a3a4c9e804c656

奥里利亚组成

Aurelia compose

aurelia

aurelia-templating