template 模板
374
template 模板封装了第三方模板引擎 Mustache.js,可以访问Mustache.js 文档了解更多信息。本组件暂时只支持辅助其他组件完成模板渲染工作,直接使用不会渲染。
标题 | 内容 |
---|---|
所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js |
示例
<!-- 模板引擎类型的组件统一使用 `<template>` 标签 --> <template type="mip-mustache"> Hello {{world}}! </template> /** * 组件脚本代码 * * element {HTML node} HTML DOM 节点 * data {Object} 是传递给模板用来渲染的数据 * html {string} 编译后的 html 字符串 */ var templates = require('templates'); templates.render(element, data).then(function (html) { element.innerHTML = html; });
属性
type
说明:模板引擎类型
必选项:是
类型:字符串
Mustache 语法
基本使用
- data { name: 'Chris', age: '15', sex: '<b>female</b>' } - Template <template type="mip-mustache" id="mip-template-id"> <li>name: {{name}}</li> <li>age: {{age}}</li> <li>sex: {{sex}}</li> <li>sex: {{{sex}}}</li> <li>sex: {{&sex}}</li> {{=<% %>=}} <li>sex: {{sex}}</li> <%={{ }}=%> </template> - 编译后的 html <li>name: Chris</li> <li>age: 15</li> <li>sex: <b>female</b></li> <li>sex: <b>female</b></li> <li>sex: </li> <li>sex: {{sex}}</li>
复杂data的使用
- data { name: { first: 'Michael', last: 'Jackson' }, age: '15' } - Template <template type="mip-mustache" id="mip-template-id"> <li>name: {{name.first}} {{name.last}}</li> <li>age: {{age}}</li> </template> - 编译后的 html <li>name: Michael Jackson</li> <li>age: 15</li>
对象数组
- data { "stooges": [ { "name": "Moe" }, { "name": "Larry" }, { "name": "Curly" } ] } - Template <template type="mip-mustache" id="mip-template-id"> {{#stooges}} <li>{{name}}</li> {{/stooges}} </template> - 编译后的 html <li>Moe</li> <li>Larry</li> <li>Curly</li>
一维数组
- data { musketeers: ["Athos", "Aramis", "Porthos", "D'Artagnan"] } - Template <template type="mip-mustache" id="mip-template-id"> {{#musketeers}} <li>{{.}}</li> {{/musketeers}} </template> - 编译后的 html <li>Athos</li> <li>Aramis</li> <li>Porthos</li> <li>D'Artagnan</li>
循环函数
- data { "beatles": [ { "firstName": "John", "lastName": "Lennon" }, { "firstName": "Paul", "lastName": "McCartney" }, { "firstName": "George", "lastName": "Harrison" }, { "firstName": "Ringo", "lastName": "Starr" } ], "name": function () { return this.firstName + " " + this.lastName; } } - Template <template type="mip-mustache" id="mip-template-id"> {{#beatles}} <li>{{name}}</li> {{/beatles}} </template> - 编译后的 html <li>John Lennon</li> <li>Paul McCartney</li> <li>George Harrison</li> <li>Ringo Starr</li>
函数
- data { "name": "Tater", "bold": function () { return function (text, render) { return "<b>" + render(text) + "</b>"; } } } - Template <template type="mip-mustache" id="mip-template-id"> {{#bold}}Hi {{name}}.{{/bold}} </template> - 编译后的 html <b>Hi Tater.</b>
空数组的处理
- data { "repos": [] } - Template <template type="mip-mustache" id="mip-template-id"> {{#repos}}<li>{{name}}</li>{{/repos}} {{^repos}}No repos !!{{/repos}} </template> - 编译后的 html No repos !!
可以访问Mustache.js 文档了解更多信息。
原文链接: https://www.yukx.com/h5mip/article/details/2222.html 优科学习网template 模板
推荐文章
-
在HTML中,如果你想让一个输入框(input元素)不可编辑,你可以通过设置其readonly属性来实现。示例如下:input type="text" value="此处内容不可编辑" readonly在上述代码中,readonly属性使得用户无法修改输入框中的内容。另外,如果你希望输入框完全不可交
-
ASP.NET教程ASP.NET又称为ASP+,基于.NETFramework的Web开发平台,是微软公司推出的新一代脚本语言。ASP.NET是一个使用HTML、CSS、JavaScript和服务器脚本创建网页和网站的开发框架。ASP.NET支持三种不一样的开发模式:WebPages(Web页面)、
-
C# 判断判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的)。下面是大多数编程语言中典型的判断结构的通常形式:判断语句C#提供了以下类型的判断语句。点击链接查看每个语句的细节。语句描述if语句一个 if语句 由一个布尔表达式后跟
-
C#循环有的时候,可能需要多次执行同一块代码。通常情况下,语句是顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推。编程语言提供了允许更为复杂的执行路径的多种控制结构。循环语句允许我们多次执行一个语句或语句组,下面是大多数编程语言中循环语句的通常形式:循环类型C#提供了以下几种循环类型
-
C#数组(Array)数组是一个存储相同类型元素的固定大小的顺序集合。数组是用来存储数据的集合,一般认为数组是一个同一类型变量的集合。声明数组变量并不是声明number0、number1、...、number99一个个单独的变量,而是声明一个就像numbers这样的变量,然后使用numbers[0]
-
ASP.NET是一个由微软公司开发的用于构建Web应用程序的框架,它是.NETFramework的一部分。它提供了一种模型-视图-控制器(MVC)架构、Web表单以及最新的ASP.NETCore中的RazorPages等多种开发模式,可以用来创建动态网页和Web服务。以下是一些基础的ASP.NET编
学习大纲