yarcowang/gist:8969090

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    There are two techs when thinking about html5 template system.

template system ---- deal with UI/view
data binding ---- deal with model

template system

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
data binding

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.
filter

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.
i18n/l10n

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...