摘要:在文件中使用模板模板定义三个最高级别的标签不用写了,能省则省的模板可以自由的使用标签比如上面的使用的标签。在模板中使用逻辑是模板语言,是安全的不会输出标签他具有以下常用的语法导入指定的模板循环判断等详细的说明可以参考。
新建一个项目Meteor
meteor create meteor-template
会生成三个文件:
meteor-template.css meteor-template.html meteor-template.js
这三个文件就是模板文件,.js文件是逻辑和数据控制文件,.css文件是样式文件。
访问.html文件会自动加载.js和.css文件。
Meteor模板定义三个最高级别的标签
meteor-study I am Meteor!
{{> meteor_study}}{{templateName}}
{{#each languages}}{{name}}
{{/each}}
不用写了,能省则省!
Meteor的模板可以自由的使用html标签比如上面的使用的标签。
{{}}是模板语言,是安全的不会输出html标签
他具有以下常用的语法:
{{> meteor_study}}导入指定的模板
{{#each langages}} {{/each}}循环
{{#if done}}done{{else}}notdone{{/if}} if判断
等...
详细的说明可以参考。
在MVC的模式中可以在Controller层给View层赋值,在Meteor中也可以在.js文件中给模板赋值:
if (Meteor.isClient) { Template.meteor_study.helpers({ templateName:"Meteor Study", languages:[{name:"Node"},{name:"Meteor"},{name:"html"},{name:"css"}] }); }
其中Meteor.isClient这句话判断是不是在客户端,在客户端就使用Template.meteor_study.helpers 给模板变量赋值。使用templateName和languages分别定义了一个字符串和一个数组。
使用css.css文件负责控制样式,在meteor-template.css添加代码:
body { font-family: sans-serif; background-color: #315481; background-image: linear-gradient(to bottom, #315481, #918e82 100%); background-attachment: fixed; position: absolute; top: 10px; bottom: 0; left: 10px; right: 0; padding: 0; margin: 0; font-size: 14px; } header { background: #d2edf4; background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%); padding: 20px 15px 15px 15px; position: relative; } h1 { font-size: 1.5em; margin: 0; margin-bottom: 10px; display: inline-block; margin-right: 1em; }
最终显示的效果:
代码地址:https://github.com/jjz/meteor...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/18779.html
摘要:当一个应用启动时,会自动加载这些库,为应用提供了一个基础环境。也就是说,模板文件只能包含以这三种标签为顶层标签的片段。在中,我们需要判断当前的具体运行环境,以便执行相应的代码。 一、全栈开发平台 - 不仅仅是前端 Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个 采用单一开发语言的全栈开发的平台:开发者可以使用JavaScript同时 进...
摘要:在我的机子上,运行于端口,以避免和其他默认运行于端口的冲突。我们可以使用命令连接数据库查看定义应用层次创建的模板应用有一个问题,客户端和服务器段的代码是一样的。在中加入然后添加问题模板注意我们使用了来确保用户未登录的情况下应用。 编者注:我们发现了有趣的一系列文章《30天学习30种新技术》,正在翻译中,一天一篇更新,年终礼包。下面是第15天的内容。 到目前为止我们讨论了Bower...
摘要:在我的机子上,运行于端口,以避免和其他默认运行于端口的冲突。我们可以使用命令连接数据库查看定义应用层次创建的模板应用有一个问题,客户端和服务器段的代码是一样的。在中加入然后添加问题模板注意我们使用了来确保用户未登录的情况下应用。 编者注:我们发现了有趣的一系列文章《30天学习30种新技术》,正在翻译中,一天一篇更新,年终礼包。下面是第15天的内容。 到目前为止我们讨论了Bower...
摘要:与此同时,服务器在后台更新。这种调整称为延迟补偿,向用户提供了更高的认知速度。网站地址安装运行命令新建项目使用可以创建一个新项目运行运行可以直接运行项目在浏览器中输入就可以看到一个网页 Meteor是什么 Meteor是一种最新的JavaScript框架,用于自动化和简化实时运行的Web应用程序的开发,它使用分布式数据协议-(Distributed Data Protocol,DDP)...
摘要:中的在中时时刻刻都不能离开,表单提交来看看在里面如何提交表单吧首先是这里我们定义了一个表单,为,有一个的还有一个提交的按钮。 Meteor中的form 在web中时时刻刻都不能离开form,表单提交,来看看在meteor里面如何提交表单吧!首先是 HTML: meteor-form form Welcome t...
阅读 3035·2023-04-26 00:40
阅读 2368·2021-09-27 13:47
阅读 4128·2021-09-07 10:22
阅读 2948·2021-09-06 15:02
阅读 3281·2021-09-04 16:45
阅读 2444·2021-08-11 10:23
阅读 3580·2021-07-26 23:38
阅读 2884·2019-08-30 15:54