Аурелия сочиняет

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 атрибутов. Мое решение состоит в том, чтобы передать все данные (может быть несколько элементов, переданных как один объект), как это:

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

Тогда модель представления будет иметь доступ к value, data а также placeholder от его model имущество.

Answer 2

<compose> имеет доступ к внешней области видимости, поэтому вам не нужно ничего связывать. Это должно работать:

использование

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

HTML

<template>${propertyFromParent}</template>

Пример выполнения https://gist.run/?id=8bb9c5503b4bbb7923a3a4c9e804c656