我瞭解Aurelia自定義元素與<compose>
的優缺點; Jeremy Danyow的blog post有幫助。但是,我想have my cake and eat it too。Aurelia動態創建自定義元素,無需撰寫
我想創建自定義元素,我也可以動態編寫。因爲<compose>
需要不同的實例化,所以使用它將意味着我需要爲每個元素創建兩個並行版本 - 一個用於<compose>
,另一個用於靜態調用。例如,請考慮以下用例:
<template>
<h1>Welcome to the Data Entry Screen</h1>
<!-- Static controls -->
<my-textbox label="Your name:" value.bind="entry_name"></my-textbox>
<my-datepicker label="Current date:" value.bind="entry_date"></my-datepicker>
<!-- Loop through dynamic form controls -->
<div class="form-group" repeat.for="control of controls" if.bind="control.type !== 'hidden'">
<label class="control-label">${control.label}</label>
<div>
<compose containerless class="form-control"
view-model="resources/elements/${control.type}/${control.type}"
model.bind="{'control': control, 'model': model, 'readonly': readonly}">
</compose>
</div>
</div>
</template>
用下面的控制數據:
controls = [
{label: 'Entry Date', type: 'my-datepicker', bind: 'acc_entry_date'},
{label: 'Code', type: 'my-textbox', bind: 'acc_entry_code'},
{label: 'Ref', type: 'my-textbox', bind: 'acc_entry_ref'},
{label: 'Description', type: 'my-textarea', rows: '3', bind: 'acc_entry_description'},
{label: 'Status', type: 'my-dropdown', bind: 'acc_entry_status', enum: 'AccountEntryStatus'},
{type: 'hidden', bind: 'acc_entry_period_id'}];
正如你可以看到,我想用<my-textbox>
和<my-datepicker>
靜態和動態。自定義元素絕對看起來是最好的方法。然而,我沒有看到如何在不創建兩個並行組件的情況下實現這一點 - 一個設計爲自定義元素,另一個設計爲可組合視圖/視圖模型。
'無容器'*搖頭和拍打LStarky在手腕上* maaaan多少次我得告訴你不要使用無容器,除非它是絕對必要的B/C的好理由(例如傳統的CSS) –
如果我不' t使用無容器,Bootstrap在''周圍顯示一個可見的框。我不認爲它會影響綁定等。但無論如何,我真正的興趣在於可以靜態和動態實例化(並且與Aurelia驗證一起工作)的構建良好的自定義控件。 –
LStarky
那麼,你去了,你給了一個有理由使用'無容器':-) –