[英]How to dynamically change the template in aurelia / click to edit table row?
使用淘汰賽,我可以動態更改表格行的模板,這樣當我點擊它時,使用編輯模板可以編輯行。 沒有導航,沒有路由,只是為行分配一個新模板。 我怎么在aurelia做這個?
以下是使用if
binding命令完成此操作的方法:
https://gist.run/?id=2408b065ecfac30ff2b1034ea8da800d
app.js
export class App {
editing = null;
planets = [
{ name: 'Mercury', diameter: 3032, distance: 35983610 },
{ name: 'Venus', diameter: 7521, distance: 67232360 },
{ name: 'Earth', diameter: 7926, distance: 92957100 },
{ name: 'Mars', diameter: 4222, distance: 141635300 },
{ name: 'Jupiter', diameter: 88846, distance: 483632000 },
{ name: 'Saturn', diameter: 74898, distance: 888188000 },
{ name: 'Uranus', diameter: 31763, distance: 1783950000 },
{ name: 'Neptune', diameter: 30778, distance: 2798842000 }];
edit(planet) {
this.editing = planet;
}
}
app.html
<template>
<table>
<thead>
<tr>
<td>Planet</td>
<td>Diameter (mi)</td>
<td>Distance to Sun (mi)</td>
</tr>
</thead>
<tbody>
<tr repeat.for="planet of planets" click.delegate="edit(planet)">
<!-- read-only mode -->
<td if.bind="editing !== planet">${planet.name}</td>
<td if.bind="editing !== planet">${planet.diameter}</td>
<td if.bind="editing !== planet">${planet.distance}</td>
<!-- edit-mode -->
<td if.bind="editing === planet"><input value.bind="planet.name" type="text"></td>
<td if.bind="editing === planet"><input value.bind="planet.diameter" type="number"></td>
<td if.bind="editing === planet"><input value.bind="planet.distance" type="number"></td>
</tr>
</tbody>
</table>
</template>
CSS:
thead {
font-weight: bold;
}
tbody > tr > td {
cursor: pointer;
}
您可以使用視圖策略動態選擇視圖模型的視圖。
http://aurelia.io/docs.html#compose - 向下滾動到關於視圖策略的部分
如果您想根據數據動態確定視圖怎么辦? 或運行時條件? 您也可以通過在視圖模型上實現getViewStrategy()方法來實現。 它可以返回視圖的相對路徑或ViewStrategy的實例以獲取自定義視圖加載行為。 好的部分是在激活回調之后執行此方法,因此您在確定視圖時可以訪問模型數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.