2

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

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

4

2 回答 2

2

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

然后视图模型将可以访问value,data和placeholder从它的model属性。

于 2017-01-27T14:54:59.863 回答
2

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

用法

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

HTML

<template>${propertyFromParent}</template>

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

于 2017-01-27T15:05:24.217 回答