首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-Template7 示例

时间：2016-06-28 16:50:08      阅读：441      评论：0      收藏：0      [点我收藏+]

{{#each}}...{{else}}...{{/each}}

{{#each}}?is a block expression, that iterates through items of passed Array or through properties of passed Object.

The following additional variables are available inside of this helper:

  • @index?- index number of the item. For arrays only

  • @first?- equal to?true?for the first item in array. For arrays only

  • @last?- equal to?true?for the last item in array. For arrays only

  • @key?- name of current object property. For objects only

Iterate through Array items

  1. <!DOCTYPE?html>
  2. <html>
  3. ????<head>
  4. ????????<meta?charset="utf-8">
  5. ????????<title>Template7?实例教程
  6. ????????</title>
  7. ????</head>
  8. ????<body>
  9. ????????<div?class="views">
  10. ????????????<div?class="view?view-main">
  11. ????????????????<div?class="pages">
  12. ????????????????????<script?id="homeTemplate"?type="text/template7">
  13. ????????????????????????<div?data-page="home"?class="page">
  14. ????????????????????????????<div?class="page-content">
  15. ????????????????????????????????<div?class="content-block">
  16. ????????????????????????????????????<p>Here?are?the?list?of?people?i?know:</p>
  17. ????????????????????????????????????<ul>
  18. ??????????????????????????????????????{{#each?people}}
  19. ??????????????????????????????????????<li>{{firstName}}?{{lastName}}</li>
  20. ??????????????????????????????????????{{/each}}????
  21. ????????????????????????????????????</ul>??????????
  22. ????????????????????????????????</div>
  23. ????????????????????????????</div>
  24. ????????????????????????</div>????
  25. ????????????????????</script>
  26. ????????????????</div>
  27. ????????????</div>
  28. ????????</div>
  29. ????????<script?type="text/javascript"?src="//ku.shouce.ren/libs/fk7/1.4.2/js/framework7.min.js">
  30. ????????</script>
  31. ????????<script>//?声明Dom7
  32. ????????????var?$$?=?Dom7;
  33. ????????????//?初始化?App
  34. ????????????var?myApp?=?new?Framework7({
  35. ????????????????precompileTemplates:?true
  36. ????????????????});
  37. ????????????var?mainView?=?myApp.addView(‘.view-main‘);
  38. ????????????//?Now?we?may?render?our?compiled?template?by?passing?required?context
  39. ????????????var?context?=?{
  40. ??????????????????people?:?[
  41. ????????????????????{
  42. ??????????????????????firstName:?‘John‘,
  43. ??????????????????????lastName:?‘Doe‘
  44. ????????????????????},
  45. ????????????????????{
  46. ??????????????????????firstName:?‘Mark‘,
  47. ??????????????????????lastName:?‘Johnson‘
  48. ????????????????????},
  49. ??????????????????]
  50. ????????????????}????;
  51. ????????????mainView.router.load({
  52. ????????????????template:?Template7.templates.homeTemplate,
  53. ????????????????context:?context
  54. ????????????})
  55. ????????</script>
  56. ????</body>
  57. </html>
复制

实例预览

  1. <p>Here?are?the?list?of?people?i?know:</p>
  2. <ul>
  3. ????{{#each?people}}
  4. ????<li>{{@index}}.?{{this}}
  5. ????</li>
  6. ????{{/each}}????
  7. </ul>
  8. <script>
  9. var?context?=?{
  10. people?:?[‘John?Doe‘,?‘Mark?Johnson‘]
  11. }
  12. </script>
复制

实例预览

Iterate through Object properties

  1. <p>Car?properties:</p>
  2. <ul>
  3. ????{{#each?props}}
  4. ????<li>{{@key}}:?{{this}}
  5. ????</li>
  6. ????{{/each}}
  7. </ul>
  8. <script>
  9. ????var?context?=?{
  10. ????????props:?{
  11. ????????????power:?‘150?hp‘,
  12. ????????????speed:?‘200?km/h‘,
  13. ????????}
  14. ????};
  15. </script>
复制

实例预览

{{else}} expression

  1. <p>Car?properties:</p>
  2. <ul>
  3. ????{{#each?props}}
  4. ????<li>{{@key}}:?{{this}}</li>
  5. ????{{else}}
  6. ????<li>No?properties</li>
  7. ????{{/each}}
  8. </ul>?
  9. <script>
  10. ????var?context?=?{
  11. ????????props:?{
  12. ????????????power:?‘150?hp‘,
  13. ????????????speed:?‘200?km/h‘,
  14. ????????}
  15. ????};
  16. </script>
复制

实例预览

{{#if}}...{{else}}...{{/if}}

{{#if}} helper renders content if passed context is not "false" (or "undefined" or "null" or "" or "0") , otherwise it renders inverse content that optionally could be passed to {{else}} expression inside of helper:

  1. <a?href="#"?{{#if?active}}class="active"{{/if}}>{{title}}</a>
  2. <script>
  3. ????var?context?={
  4. ????????active:?true,
  5. ????????title:?‘Link‘,
  6. ????};
  7. </script>
复制

实例预览

{{else}} expression

  1. <p>Hello,?my?name?is?{{name}}.</p>
  2. {{#if?hobby}}
  3. <p>I?have?hobby</p>
  4. {{else}}
  5. <p>I?don‘t?have?hobby</p>
  6. {{/if}}??
  7. <script>
  8. ????var?context?={
  9. ????????name:?‘John?Doe‘,
  10. ????????hobby:?false
  11. ????};
  12. </script>
复制

?实例预览

{{#unless}}...{{else}}...{{/unless}}

{{#unless}} helper renders content if passed context is "false" (or "undefined" or "null" or "" or "0") , otherwise it renders inverse content that optionally could be passed to {{else}} expression inside of helper:

  1. <a?href="#"?{{#unless?active}}class="active"{{/unless}}>{{title}}</a>
  2. <ul>
  3. ????{{#each?props}}
  4. ????<li>{{@key}}:?{{this}}
  5. ????</li>
  6. ????{{/each}}
  7. </ul>
  8. <script>
  9. ????var?context={
  10. ????????active:?true,
  11. ????????title:?‘Link‘,
  12. ????};
  13. </script>
复制

实例预览

{{else}} expression

  1. <p>Hello,?my?name?is?{{name}}.</p>
  2. {{#unless?hobby}}
  3. <p>I?have?hobby</p>
  4. {{else}}
  5. <p>I?don‘t?have?hobby</p>
  6. {{/unless}}??
  7. <ul>
  8. ????{{#each?props}}
  9. ????<li>{{@key}}:?{{this}}</li>
  10. ????{{/each}}
  11. </ul>
  12. <script>
  13. ????var?context={
  14. ????????name:?‘John?Doe‘,
  15. ????????hobby:?false
  16. ????};
  17. </script>
复制

实例预览

{{#with}}...{{/with}}

{{#with}} helper changes rendering context to the passed context:

  1. {{#with?props}}
  2. <p>Car?has?{{power}}?power?and?{{speed}}?maximum?speed</p>
  3. {{/with}}
  4. <script>
  5. ????var?context={
  6. ????????props:?{
  7. ????????????power:?‘150?hp‘,
  8. ????????????speed:?‘200?km/h‘,
  9. ????????}
  10. ????};
  11. </script>
复制

实例预览

{{#variableName}}...{{/variableName}}

If you pass a block expression with helper name that is in the expression context, then it will work like {{#each}} helper for this context if it is an Array, and will work like {{#with}} helper if it is an Object:

  1. <ul>
  2. ????{{#people}}
  3. ????<li>{{name}}?-?{{age}}?years?old</li>
  4. ????{{/people}}
  5. </ul>
  6. <script>
  7. ????var?context={
  8. ????????people:?[
  9. ????????????{
  10. ????????????????name:?‘John?Doe‘,
  11. ????????????????age:?18
  12. ????????????}
  13. ????????????,
  14. ????????????{
  15. ????????????????name:?‘Mark?Johnson‘,
  16. ????????????????age:?21
  17. ????????????}
  18. ????????]??
  19. ????};
  20. </script>
复制

实例预览

  1. {{#props}}
  2. <p>Car?has?{{power}}?power?and?{{speed}}?maximum?speed</p>
  3. {{/props}}
  4. <script>
  5. ????var?context={
  6. ????????props:?{
  7. ????????????power:?‘150?hp‘,
  8. ????????????speed:?‘200?km/h‘,
  9. ????????}
  10. ????};
  11. </script>
复制

实例预览

{{join delimiter=""}}

This plain helper will join Array items to single string with passed delimiter

  1. <h3>"{{title}}"?TV?Show</h3>
  2. <p>Was?released?in?year?{{year}}</p>
  3. <p>Genres:?{{join?genres?delimiter=",?"}}</p>
  4. <script>
  5. ????var?context={
  6. ????????title:?‘Friends‘,
  7. ????????year:?2001,
  8. ????????genres:?[‘comedy‘,?‘drama‘]
  9. ????};
  10. </script>
复制

实例预览

{{escape}}

This plain helper returns escaped HTML string. It escapes only the following characters:?< > " &

  1. <h1>{{title}}</h1>
  2. <p>{{escape?body}}</p>
  3. <script>
  4. ????var?context={
  5. ????????title:?‘Paragraphs‘,
  6. ????????body:?‘We?need?to?use?<p>?tags?to?add?paragraphs?in?HTML‘,
  7. ????};
  8. </script>
复制

实例预览

{{js "expression"}}

This inline helper allows to execute some simple JavaScript directly in template to modify/check context on the fly or for some JS calculations

  1. <h3>{{title}}</h3>
  2. <p>Price:?${{js?"this.price?*?1.2"}}</p>
  3. <p>{{js?"this.inStock???‘In?Stock‘?:?‘Not?in?stock‘"}}</p>
  4. <script>
  5. ????var?context={
  6. ????????title:?‘iPhone?6?Plus‘,
  7. ????????price:?1000,
  8. ????????inStock:?true
  9. ????};
  10. </script>
复制

实例预览

{{#js_compare "expression"}}...{{/js_compare}}

Block helper for easier compares of context variables. It renders content if JavaScript expression is not "false" (or "undefined" or "null" or "" or "0") , otherwise it renders inverse content that optionally could be passed to {{else}} expression inside of helper

  1. <h3>{{title}}</h3>
  2. <p>Price:?${{price}</p>
  3. <p>{{#js_compare?"this.color?===?‘white‘?&&?this.memory?>?16"}}Not?in?stock{{else}}In?stock{{/js_compare}}</p>
  4. <script>
  5. ????var?context={
  6. ????????title:?‘iPhone?6?Plus‘,
  7. ????????price:?1000,
  8. ????????color:?‘white‘,
  9. ????????memory:?32
  10. ????};
  11. </script>
复制

实例预览

Using Custom Helpers

Template7 allows to register custom helpers with the following method:

Template7.registerHelper(name, helper)

  • name -?string?- helper name
  • helper -?function?- helper function to handle passed context

Helper function could accepts as many arguments as required, arguments could be context, strings and hash data.

Let‘s look how to register helper on example of simple {{#if}} helper:

  1. Template7.registerHelper(‘if‘,?function?(condition,?options)?{
  2. ??//?"this"?in?function?context?is?equal?to?the?expression?execution?context
  3. ??//?"condition"?argument?contains?passed?context/condition
  4. ??/*
  5. ????@options?contains?object?with?the?wollowing?properties?and?methods:
  6. ????"hash"?-?contains?passed?hash?object?with?parameters
  7. ????"fn"?-?method?to?pass?helper?block?content?further?to?compilier
  8. ????"inverse"?-?method?to?pass?helper?block?inverse?({{else}})?content?further?to?compilier
  9. ????"data"?-?contains?additional?expression?data,?like?@index?for?arrays?or?@key?for?object
  10. ??*/
  11. ?
  12. ??//?First?we?need?to?check?is?the?passed?context?is?function
  13. ??if?(typeof?condition?===?‘function‘)?condition?=?condition.call(this);
  14. ?
  15. ??//?If?context?condition
  16. ??if?(condition)?{
  17. ????//?We?need?to?pass?block?content?further?to?compilier?with?the?same?context?and?the?same?data:
  18. ????options.fn(this,?options.data);
  19. ??}
  20. ??else?{
  21. ????//?We?need?to?pass?block?inverse?({{else}})?content?further?to?compilier?with?the?same?context?and?the?same?data:
  22. ????options.inverse(this,?options.data);
  23. ??}
  24. });
复制

Or on example of plain {{join}} helper:

  1. Template7.registerHelper(‘join‘,?function?(arr,?options)?{
  2. ??//?First?we?need?to?check?is?the?passed?arr?argument?is?function
  3. ??if?(typeof?arr?===?‘function‘)?arr?=?arr.call(this);
  4. ?
  5. ??/*?
  6. ????Passed?delimiter?is?in?the?options.hash?object:
  7. ????console.log(options.hash)?->?{delimiter:?‘,?‘}
  8. ??*/
  9. ?
  10. ??//?And?return?joined?array
  11. ??return?arr.join(options.hash.delimiter);
  12. });
复制

Or we can create helper to create?Framework7‘s list-block?link to work with this syntax:

  1. {{link?url?title?target="_blank"}}
复制
  1. Template7.registerHelper(‘link‘,?function?(url,?title,?options){
  2. ??var?ret?=?‘<li>‘?+
  3. ??????????????‘<a?href="‘?+?url?+?‘"?class="item-content?item-link"?target="‘?+?options.hash.target?+?‘">‘?+
  4. ????????????????‘<div?class="item-inner">‘?+
  5. ??????????????????‘<div?class="item-title">‘?+?title?+?‘</div>‘?+
  6. ????????????????‘</div>‘?+
  7. ??????????????‘</a>‘?+
  8. ????????????‘</li>‘;
  9. ??return?ret;
  10. });
复制
  1. <div?class="list-block">
  2. ??<ul>
  3. ????{{#each?links}}
  4. ????{{link?url?title?target="_blank"}}
  5. ????{{/each}}????
  6. ??</ul></div>
复制
  1. {
  2. ??links:?[
  3. ????{
  4. ??????url:?‘http://google.com‘,
  5. ??????title:?‘Google‘
  6. ????},
  7. ????{
  8. ??????url:?‘http://idangero.us‘,
  9. ??????title:?‘iDangero.us‘
  10. ????},
  11. ??]
  12. }
复制

输出

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<li>
  4. ??????<a?href="http://google.com"?target="_blank"?class="item-link?item-content">
  5. ????????<div?class="item-inner">
  6. ??????????<div?class="item-title">Google</div>
  7. ????????</div>
  8. ??????</a>
  9. ????</li>
  10. ????<li>
  11. ??????<a?href="http://idangero.us"?target="_blank"?class="item-link?item-content">
  12. ????????<div?class="item-inner">
  13. ??????????<div?class="item-title">iDangero.us</div>
  14. ????????</div>
  15. ??????</a>
  16. ????</li>
  17. ??</ul>
  18. </div>
复制

Note, that all custom helpers should be registered before you compile templates with these helpers!

Remove Custom Helpers

Template7 allows to remove custom helpers with the following method:

Template7.unregisterHelper(name)

  • name -?string?- helper name

Global Context

Template7 also supports global context which is accessible from any context.

We can specify it in?Template7.global?property:

  1. Template7.global?=?{
  2. ????os:?‘iOS‘,
  3. ????browser:?‘Chrome‘,
  4. ????username:?‘johndoe‘,
  5. ????email:?‘john@doe.com‘
  6. };
复制

To access it in templates we need to use?{{@global}}?variable:

  1. <p>Hello,?{{@global.username}}.?Your?email?is?{{@global.email}}</p>
复制

Access To Root Context

Sometimes we may need to access to initially passed root context in our templates. For this case we need to use?{{@root}}?variable. This is especially helpful when we are deep in context:

  1. {
  2. ????persons:?[
  3. ????????{
  4. ????????????name:?‘John‘,
  5. ????????????hobby:?[‘Cars‘,?‘Food‘]
  6. ????????},
  7. ????????{
  8. ????????????name:?‘Kyle‘,
  9. ????????????hobby:?[‘Travel‘,?‘Puzzles‘]
  10. ????????},
  11. ?
  12. ????],
  13. ????showHobby:?true
  14. }
复制
  1. {{#each?persons}}
  2. ????<h2>{{name}}</h2>
  3. ????<h3>Hobby:</h3>
  4. ????{{#if?@root.showHobby}}
  5. ????????<ul>
  6. ????????????{{#each?hobby}}
  7. ????????????????<li>{{this}}</li>
  8. ????????????{{/each}}
  9. ????????</ul>
  10. ????{{/if}}
  11. {{/each}}
复制

Partials

Template7 allows to reuse template using through partials. Partials are normal usual Template7 templates that may be called by other templates.

We can register and unregister partials using the following methods:

Template7.registerPartial(name, template)?- register partial

  • name -?string?- partial name
  • helper -?string?- partial template

Template7.unregisterPartial(name)?- unregister partial

  • name -?string?- partial name

Then we can use our partials using special helper?{{> "partialName"}}

Template:

  1. <ul?class="users">
  2. ????{{#each?users}}
  3. ????{{>?"user"}}
  4. ????{{/each}}
  5. </ul>
  6. <ul?class="admins">
  7. ????{{#each?admins}}
  8. ????{{>?"user"}}
  9. ????{{/each}}
  10. </ul>
复制

Register partial:

  1. Template7.registerPartial(‘user‘,?‘<li><h2>{{firstName}}?{{lastName}}</h2><p>{{bio}}</p></li>‘)
复制

Apply to the template this context:

  1. {
  2. ????users:?[
  3. ????????{
  4. ????????????firstName:?‘John‘,
  5. ????????????lastName:?‘Doe‘,
  6. ????????????bio:?‘Lorem?ipsum?dolor‘
  7. ????????},
  8. ????????{
  9. ????????????firstName:?‘Jane‘,
  10. ????????????lastName:?‘Doe‘,
  11. ????????????bio:?‘Donec?sodales?euismod?augue‘
  12. ????????}
  13. ????],
  14. ????admins:?[
  15. ????????{
  16. ????????????firstName:?‘Mike‘,
  17. ????????????lastName:?‘Doe‘,
  18. ????????????bio:?‘Lorem?ipsum?dolor‘
  19. ????????},
  20. ????????{
  21. ????????????firstName:?‘Kate‘,
  22. ????????????lastName:?‘Doe‘,
  23. ????????????bio:?‘Donec?sodales?euismod?augue‘
  24. ????????}
  25. ????]
  26. }
复制

And we will get the following output:

  1. <ul?class="users">
  2. ????<li>
  3. ????????<h2>John?Doe</h2>
  4. ????????<p>Lorem?ipsum?dolor</p>
  5. ????</li>
  6. ????<li>
  7. ????????<h2>Jane?Doe</h2>
  8. ????????<p>Donec?sodales?euismod?augue</p>
  9. ????</li>
  10. </ul>
  11. <ul?class="admins">
  12. ????<li>
  13. ????????<h2>Mike?Doe</h2>
  14. ????????<p>Lorem?ipsum?dolor</p>
  15. ????</li>
  16. ????<li>
  17. ????????<h2>Kate?Doe</h2>
  18. ????????<p>Donec?sodales?euismod?augue</p>
  19. ????</li>
  20. </ul>
复制

Recursive Partials

We can even use partials to make recursive templates, like nested comments:

  1. //?Simple?template?with?just?a?partial
  2. var?template?=?‘{{>?"comments"}}‘
  3. ?
  4. //?Register?partial
  5. Template7.registerPartial(
  6. ????‘comments‘,?
  7. ????‘<ul>‘?+?
  8. ????????‘{{#each?comments}}‘?+
  9. ????????????‘<li>‘?+
  10. ????????????‘<h2>{{author}}</h2>‘?+
  11. ????????????‘<p>{{text}}</p>‘?+
  12. ????????????‘{{#if?comments}}{{>?"comments"}}{{/if}}‘?+
  13. ????????????‘</li>‘?+
  14. ????????‘{{/each}}‘?+
  15. ????‘</ul>‘
  16. );
  17. ?
  18. //?Compile?template?
  19. var?compiledTemplate?=?Template7.compile(template);
  20. ?
  21. //?Render?template?
  22. var?output?=?compiledTemplate({
  23. ????comments:?[
  24. ????????{
  25. ????????????author:?‘John?Doe‘,
  26. ????????????text:?‘Lorem?ipsum?dolor‘,
  27. ????????????comments:?[
  28. ????????????????{
  29. ????????????????????author:?‘Mike?Doe‘,
  30. ????????????????????text:?‘Aliquam?erat?volutpat‘
  31. ????????????????},
  32. ????????????????{
  33. ????????????????????author:?‘Kate?Doe‘,
  34. ????????????????????text:?‘Donec?eget?fringilla?turpis‘
  35. ????????????????}
  36. ????????????]
  37. ????????},
  38. ????????{
  39. ????????????author:?‘Jane?Doe‘,
  40. ????????????text:?‘Donec?sodales?euismod?augue‘
  41. ????????}
  42. ????]
  43. })
复制

And the output will be:

  1. <ul?class="comments">
  2. ????<li>
  3. ????????<h2>John?Doe</h2>
  4. ????????<p>Lorem?ipsum?dolor</p>
  5. ????????<ul?class="comments">
  6. ????????????<li>
  7. ????????????????<h2>Mike?Doe</h2>
  8. ????????????????<p>Aliquam?erat?volutpat</p>
  9. ????????????</li>
  10. ????????????<li>
  11. ????????????????<h2>Kate?Doe</h2>
  12. ????????????????<p>Donec?eget?fringilla?turpis</p>
  13. ????????????</li>
  14. ????????</ul>
  15. ????</li>
  16. ????<li>
  17. ????????<h2>Jane?Doe</h2>
  18. ????????<p>Donec?sodales?euismod?augue</p>
  19. ????</li>
  20. </ul>
复制

Performance Tips

Template7 is fast and you can make it even faster in your apps. The slowest part (but still very fast in T7) in compilation/rendering process is the compilation from string to pure JS function when you do?Template7.compile(). So don‘t compile the same templates multiple times, one time will be enough:

  1. //?Begin?of?your?app
  2. ?
  3. //?Compile?templates?once?on?app?load/init
  4. var?searchTemplate?=?$(‘script#search-template‘).html();
  5. var?compiledSearchTemplate?=?Template7.compile(searchTemplate);
  6. ?
  7. var?listTemplate?=?$(‘script#list-template‘).html();
  8. var?compiledListTemplate?=?Template7.compile(listTemplate);
  9. ?
  10. //?That?is?all,?now?and?further?just?execute?compiled?templates?with?required?context
  11. //?Just?execute?compiled?search?template?with?required?content:
  12. var?html?=?compiledSearchTemplate({/*...some?data...*/});
  13. ?
  14. //?Do?something?with?html...

移动端安卓和IOS开发框架Framework7教程-Template7 示例

原文：http://zaixianshouce.iteye.com/blog/2307757
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！