Comments (5)
my proposal is to put it in the tokenize function of Template, as shown below (js version). Its the seven lines between "CALL TEMPLATE RECURSIVE START/END". It is tested, works well and is very helpful for many of my more complicated use-cases.
I would create a pull request but i couldn't get the bin/compile script to work (on an unmodified snuggsi), and i don't fully understand your ES coding conventions.
Please consider inclusion in the next release.
var Template = function (template) {
...
function tokenize (context, index) {
var
clone = fragment.cloneNode (true)
typeof context != 'object'
&& ( context = { self: context })
context ['#'] = index
void (new TokenList (clone))
.bind (context)
/****** CALL TEMPLATE RECURSIVE START ******/
for (var tmp of clone.querySelectorAll("template")) {
var name = tmp.getAttribute('name')
if (context[name]) {
var temp = Template(tmp)
temp.bind(context[name])
}
}
/****** CALL TEMPLATE RECURSIVE END ******/
return clone
}
...
}
from snuggsi.
Of course
get config() {
return [ { test: "One", odd: { bar: 1 } }, { test: "Two", even: { foo: 2 } } ];
}
works as well (as expected, principle of least surprise) and yields
<div id="0">
Item One <span>(odd 1)</span>
</div>
<div id="1">
Item Two <span>(even 2)</span>
</div>
based on the following slightly modified template
<template>
<template name="config">
<div id="{#}">
Item {test}
<template name="even">
<span>(even {foo})</span>
</template>
<template name="odd">
<span>(odd {bar})</span>
</template>
</div>
</template>
</template>
from snuggsi.
@etm interesting as we are having same conversation over at WHATWG. Glad you provided an example. Thanks!
from snuggsi.
I'm not sure if there are any scary implications to this, but I think the concept could be useful.
from snuggsi.
Add reference updates to template parsing from WHATWG DOM:
- https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md
- https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
- https://html.spec.whatwg.org/multipage/parsing.html#stack-of-template-insertion-modes
- WICG/webcomponents#704
- https://github.com/componentkitchen/template-instantiation
from snuggsi.
Related Issues (20)
- Polyfill support for IE11+ HOT 4
- Update Documentation for `context`, `initialize`, `onconnect`, & `onidle`
- devDependencies SECURITY ALERT
- browser-sync -> localtunnel -> axios vulnerability
- Sponsorship button
- `<template>.content` May not be working in I.E. 11 after `DomContentLoaded`
- Remove Web Components Section from Readme.md
- Declarative properties
- Range node error when parsing Template tokens. HOT 6
- Incommunicado? HOT 6
- Slack link not working HOT 1
- What is the reason for the limited npm/node engines? HOT 3
- Browser Sync vulnerability ... (again) HOT 6
- Basic example: Getting "TypeError: Illegal constructor" HOT 7
- Is it possible to tweak to be able to run on Android 4.4 KitKat? HOT 1
- "Failed to execute 'selectNodeContents'" on 'Range': parameter 1 is not of type 'Node' HOT 2
- Server side rendering HOT 3
- Readme Template Example Fails to Run
- Improvement: NPM Support & Named Imports
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from snuggsi.