奥里利亚作曲答案

【问题标题】：Aurelia compose奥里利亚作曲
【发布时间】：2017-01-27 12:46:29
【问题描述】：

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

【问题讨论】：

我也刚刚从 Ashley Grant 那里了解到，您不能将 @bindable 参数与 <compose> 一起使用，并且如果您有一个仅视图元素，则视图连接到外部范围，但是如果你有一个视图模型，你需要通过model.bind。
我发现有趣的是，当你使用model.bind 时，你不需要使用@bindable 装饰器来接收参数。它们可以立即在视图中使用。 这仍然是真的吗？ 我似乎无法找到一种方法让 Aurelia 将 model 属性绑定到视图模型，而无需主动分配他们自己...

标签： aurelia aurelia-templating

【解决方案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>

然后视图模型将可以通过其model 属性访问value、data 和placeholder。

【讨论】：

【解决方案2】：

<compose> 可以访问外部作用域，因此您不需要绑定任何东西。这应该有效：

用法

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

HTML

<template>${propertyFromParent}</template>

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

【讨论】：

这个范围是只能在bind() 方法中使用还是在任何时候都可用？
bind 之后的所有时间，我认为
法比奥，我已经试过了，但它根本不起作用。 bind() { console.log("EwTextbox bind():", this); } 仅显示 __observers__ 和 __proto__ 并且不包括来自父级的任何数据。 this.control 未定义。
如果您将model="control" 添加到您的<compose> 标记中，上述方法将起作用。感谢您的贡献，因为它帮助我解决了大问题，我将其添加到我的问题编辑中。
@LStarky <compose> 可以访问外部作用域，无需使用model.bind。但是，就像我说的那样，在 bind() 方法中无法访问数据。我对那部分不正确，对不起。不过，您仍然可以在视图中使用该属性。见gist.run/?id=8bb9c5503b4bbb7923a3a4c9e804c656