Skip to content

Instantly share code, notes, and snippets.

@AbraaoAlves
Forked from AshleyGrant/app.html
Last active March 25, 2017 23:17
Show Gist options
  • Save AbraaoAlves/79365ee4249233cf6fbead142b0ef9ea to your computer and use it in GitHub Desktop.
Save AbraaoAlves/79365ee4249233cf6fbead142b0ef9ea to your computer and use it in GitHub Desktop.
Aurelia tamplate map
<template>
<require from="./grid.html"></require>
<grid
data.bind="list"
config.bind="config"
>
</grid>
</template>
export class App {
list = [
{id: 1, name:'adsad asasd', age:'13'},
{id: 2, name:'qweqw asasd', age:'12'},
{id: 3, name:'zxczx asasd', age:'11'},
{id: 4, name:'lkjlk asasd', age:'15'},
{id: 5, name:'vnbvn asasd', age:'10'},
].map(i => (i.name = `
<a href="/panels/${i.id}" title="${i.name}">${i.name}</a>
`, i));
config = {
properties:[
{key:'id' , title: 'Id'},
{key:'name', title: 'Nome'},
{key:'age' , title: 'Idade'},
]
};
}
<template bindable="data,config">
<table>
<thead>
<tr>
<th repeat.for="c of config.properties">
${c.title}
</th>
</tr>
</thead>
<tbody>
<tr repeat.for="item of data">
<td repeat.for="property of config.properties">
<div innerhtml.bind="item[property.key]"></div>
</td>
</tr>
</tbody>
</table>
</template>
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment