yarcowang · August 29, 2015 13:56 · Feb 26, 2014 · Feb 19, 2014 · Feb 19, 2014 · Feb 13, 2014
diff --git a/gistfile1.md b/gistfile1.md
@@ -1,15 +1,16 @@
 There are two techs when thinking about html5 template system.
 
-* template system
-* data binding
+* template system ---- deal with UI/view
+* data binding ---- deal with model
 
 template system
 --------
-template can be local and global.
+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
 ```html
 <template>
 <tpl local id="tpl-person">
@@ -20,14 +21,12 @@ template can be local and global.
 ```
 
 ```javascript
-template.getTemplateById('tpl-person');
+template.getTemplateById('tpl-person'); // just like a dom element
 ```
 
 data binding
 -------------
-template system is dealing with UI relevant works, so it should work like a dom. but when talking about data binding, it is really different. We are facing model, get it? So that's why angularjs is not good to deal with UI effects. (angularjs is good at data binding, but can not totally replace jquery)
-
-when defining a model, i think the following grammar could be done:
+When defining a model, i think the following grammar could be done:
 
 ```html
 <template>
@@ -46,4 +45,59 @@ 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
+
+```javascript
+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
+```html
+<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.
+
+```html
+<template>
+<tpl local id="tpl-person">
+<div model="person">
+  Name: ??
+  Age: ??
+</div>
+</tpl>
+</template>
+```
+
+```javascript
+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.
+
+```html
+<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...
diff --git a/gistfile1.md b/gistfile1.md
@@ -16,6 +16,7 @@ template can be local and global.
   Name: ??
   Age: ??
 </tpl>
+</template>
 ```
 
 ```javascript

diff --git a/gistfile1.md b/gistfile1.md
@@ -1,42 +1,48 @@
-// this is a mail for suggesting adding internal template engine into html5
+There are two techs when thinking about html5 template system.
 
-Hi Sir:
+* template system
+* data binding
 
-I'm a php developer who sometimes touch javascript. I think there might be requirements for adding internal template system into modern browser.
+template system
+--------
+template can be local and global.
 
-Normally js lib would like to do this (for example in backbone):
+* 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)
 
+```html
+<template>
+<tpl local id="tpl-person">
+  Name: ??
+  Age: ??
+</tpl>
 ```
-<script type="text/template" id="...">
-...
-</script>
-```
-
-Obviously we need a common tag for that purpose when comparing to script/css links:
-
-* script with `src` attribute can link to those common javascript files
-* link with `href` attribute can link to those common css styles
-
-What about common html templates?
-We could define the same thing for this:
 
+```javascript
+template.getTemplateById('tpl-person');
 ```
-// index.html
-<tpl local id="tpl-foo">...</tpl>
 
-// tpls.html
-<tpl global id="tpl-bar">...</tpl>
+data binding
+-------------
+template system is dealing with UI relevant works, so it should work like a dom. but when talking about data binding, it is really different. We are facing model, get it? So that's why angularjs is not good to deal with UI effects. (angularjs is good at data binding, but can not totally replace jquery)
+
+when defining a model, i think the following grammar could be done:
+
+```html
+<template>
+<tpl local id="tpl-person">
+<div model="person">
+  Name: <var name="name" />
+  Age: <var name="age" />
+</div>
+</tpl>
+</template>
 ```
 
-The differences between use `<script>` and `<tpl>` are as folloing:
-
-* global templates will be cached just like cookie/localStorage
-* they can be obtained by the template engine, `document.getTemplateById('tpl-foo')`
-* they are hidden doms (so, there's no need extra step of parsing from string to dom -- like angularJs)
-* also support json as arguments. `document.getTemplateById('tpl-foo').with(...json data...)` 
-
-So what about this?
-
-Thanks.
+```javascript
+var model = template.getTemplateById('tpl-person').getModel('person');
+model.name = 'yarco';
+model.age = 'age';
+```
 
-Yarco
+Honestly, it requires the dom parse engine to do more tasks when parsing the html...
diff --git a/gistfile1.md b/gistfile1.md
@@ -28,7 +28,7 @@ We could define the same thing for this:
 <tpl global id="tpl-bar">...</tpl>
 ```
 
-The differences between use <script> and <tpl> are as folloing:
+The differences between use `<script>` and `<tpl>` are as folloing:
 
 * global templates will be cached just like cookie/localStorage
 * they can be obtained by the template engine, `document.getTemplateById('tpl-foo')`

diff --git a/gistfile1.md b/gistfile1.md
@@ -0,0 +1,42 @@
+// this is a mail for suggesting adding internal template engine into html5
+
+Hi Sir:
+
+I'm a php developer who sometimes touch javascript. I think there might be requirements for adding internal template system into modern browser.
+
+Normally js lib would like to do this (for example in backbone):
+
+```
+<script type="text/template" id="...">
+...
+</script>
+```
+
+Obviously we need a common tag for that purpose when comparing to script/css links:
+
+* script with `src` attribute can link to those common javascript files
+* link with `href` attribute can link to those common css styles
+
+What about common html templates?
+We could define the same thing for this:
+
+```
+// index.html
+<tpl local id="tpl-foo">...</tpl>
+
+// tpls.html
+<tpl global id="tpl-bar">...</tpl>
+```
+
+The differences between use <script> and <tpl> are as folloing:
+
+* global templates will be cached just like cookie/localStorage
+* they can be obtained by the template engine, `document.getTemplateById('tpl-foo')`
+* they are hidden doms (so, there's no need extra step of parsing from string to dom -- like angularJs)
+* also support json as arguments. `document.getTemplateById('tpl-foo').with(...json data...)` 
+
+So what about this?
+
+Thanks.
+
+Yarco
No results found