@hugov/inhtml
Version:
small and simple in-html templates, factories and dynamic lists
65 lines (63 loc) • 1.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>inHTML</title>
</head>
<body>
<div>
<table>
<tbody id=first>
</tbody>
</table>
<table>
<tbody id=second>
<tr id=row>
<td id=id></td>
<td>
<a id=label></a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<template>
<tr id=row>
<td id=id></td>
<td>
<a id=label></a>
</td>
</tr>
</template>
<script type=module>
import {tag, cast, list, load, $, $$} from '../browser.js'
load('./in-html-partial.html').then(fr => {
console.log(fr, typeof fr)
//document.body.appendChild(fr)
document.body.append('abc',fr)
})
const makeRow1 = cast('template', (ids,v,k) => {
console.log('ids1', ids)
ids.label.textContent = v.ms
ids.id.textContent = v.id
ids.row.update = v => ids.label.textContent = v.ms
return ids.row
})
const makeRow2 = cast('#row', (ids,v,k) => {
console.log('ids2', ids)
ids.label.textContent = v.ms
ids.id.textContent = v.id
ids.row.update = v => ids.label.textContent = v.ms
return ids.row
})
const tbody1 = list($('tbody'), makeRow1),
tbody2 = list($`#second`, makeRow2)
const data = [ {id:'1', ms:'one'} ]
tbody1.update(data)
tbody2.update(data)
data.push( {id:'2', ms:'two'} )
tbody1.update(data)
tbody2.update(data)
</script>
</html>