There are two techs when thinking about html5 template system.
- template system ---- deal with UI/view
- data binding ---- deal with model
template can be local and global.
- local template parse and load on fly
- global template works like cookie or localStorage for some domain.(so, when you visit a website, if no global template should be updated -- can re-use vtag, those templates could be fetched from global template system which may be stored just in localStorage)
?? -- place holder here
<template>
<tpl local id="tpl-person">
Name: ??
Age: ??
</tpl>
</template>
template.getTemplateById('tpl-person'); // just like a dom element
When defining a model, i think the following grammar could be done:
<template>
<tpl local id="tpl-person">
<div model="person">
Name: <var name="name" />
Age: <var name="age" />
</div>
</tpl>
</template>
var model = template.getTemplateById('tpl-person').getModel('person');
model.name = 'yarco';
model.age = 'age';
More things should be taken into consideration.
There are two types of filters:
- common and pre-defined filters (something like html escaping):
- user defined filters
template.filters.nl2br = function(value, params) {
return value.replace("\n", "<br />"); // ?
}
template.getTemplateById('tpl-person').filters.xxx = function(value, params) { // may only work in template tpl-person
// ...
}
So
<var name="name" />
can be:
<var name="name" filters="nl2br|xxx:aa,bb,cc" />
When set the attribute of the model, model.name = 'yarco';
in previous, those filters should work.
Multi-lang is always a pain.
I think text in template should always be treated as a place holder of the text.
<template>
<tpl local id="tpl-person">
<div model="person">
Name: ??
Age: ??
</div>
</tpl>
</template>
template.langs['zh-CN']['Name:'] = '名字:';
template.langs['zh-CN']['Age:'] = '年龄:';
How to distinguish them? I think because of \n
, they are two sentences.
template.lang
is for current language.
<var name="weight" /> pages
I don't think there will be translation with arguments features...(maybe)
Honestly, it requires the dom parse engine to do more tasks when parsing the html...
There is also:
Something similar as what i'm thinking in
template system
.