アウレリア製

Question

アウレリアの<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に基づくカスタム要素に渡す最も良い方法は何ですか？私のソリューションと

編集：最後に

、アウレリアの<compose>のみview、view-modelとmodel属性で動作することが表示されます。私が面白いんでしたが、あなたがmodel.bindを使用するときに、あなたがする必要がないということです

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

：私のソリューションは、すべてのデータ（単一のオブジェクトとして渡された複数の項目することができます）このようなを渡すことです@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> 

そして、ビューモデルは、そのmodelプロパティから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