Meteor Blaze
这种方法被用于绘制模板到DOM。首先,我们将创建 myNewTemplate 之后渲染。 我们增加 myContainer 这将用来作为父元素的容器,所以render方法知道在何处呈现我们的模板。
meteorApp/client/app.html
<head>
<title>meteorApp</title>
</head> <body>
<div id = "myContainer">
</div>
</body> <template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
下一步,我们将创建渲染功能这将需要两个参数。第一个是将要渲染的模板,第二个是,我们上面提到的父元素。
meteorApp/client/app.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
Blaze.render(myNewTemplate, myContainer);
}
});
如果需要被动地传递一些数据,你可以使用 renderWithData 方法。 HTML和前面的例子完全相同。
meteorApp/client/app.html
<head>
<title>meteorApp</title>
</head> <body>
<div id = "myContainer">
</div>
</body> <template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
我们可以在Meteor.renderWithData方法的第二个参数添加数据。其它两个参数和之前的实例相同,在这个例子中我们的数据将用于记录一些文本的功能。
meteorApp/client/app.js
Meteor.startup(function () { if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate; var myData = function() {
console.log('Log from the data object...')
} var myContainer = document.getElementById('myContainer');
Blaze.renderWithData(myNewTemplate, myData, myContainer);
} });
我们可以添加 remove
meteorApp/client/app.html
<head>
<title>meteorApp</title>
</head> <body>
<div id = "myContainer">
</div>
</body> <template name = "myNewTemplate">
<p>Text from my new template...</p>
</template>
在这个例子中,我们将在三秒钟后移除模板。请注意,我们使用 Blaze.Remove方法 除去模板。
meteorApp/client/app.js
Meteor.startup(function () {
if(Meteor.isClient) {
var myNewTemplate = Template.myNewTemplate;
var myContainer = document.getElementById('myContainer');
var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer); Meteor.setTimeout(function() {
Blaze.remove(myRenderedTemplate);}, 3000);
}
});
S.No. |
方法与细则
|
---|---|
1 |
Blaze.getData([elementOrView]) 用于从渲染元素检索数据。
|
2 |
Blaze.toHTML(templateOrView) 用于渲染模板或视图字符串。
|
3 |
Blaze.toHTMLWithData(templateOrView, data) 用于渲染模板或视图字符串附加数据。
|
4 |
new Blaze.View([name], renderFunction) 用于创建新 Blaze 反应性的DOM部分。 |
5 |
Blaze.currentView 用于获取当前视图。
|
6 |
Blaze.getView([element]) 用于获取当前视图。
|
7 |
Blaze.With(data, contentFunc) 用于构造呈现一些内容与上下文的视图。
|
8 |
Blaze.If(conditionFunc, contentFunc, [elseFunc]) 用于构造呈现一些有条件的内容的视图。
|
9 |
Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) 用于构造呈现一些有条件的内容(反转Blaze.if)的视图。
|
10 |
Blaze.Each(argFunc, contentFunc, [elseFunc]) 用于构建为每个项目呈现 contentFunct 的视图。 |
11 |
new Blaze.Template([viewName], renderFunction) 使用名称和内容构建新的Blaze视图。
|
12 |
Blaze.isTemplate(value) 如果值是一个模板对象则返回true。
|
Meteor Blaze的更多相关文章
- Using View and Data API with Meteor
By Daniel Du I have been studying Meteor these days, and find that Meteor is really a mind-blowing f ...
- 示例开发过程记录:meteor,react,apollo
本示例记录一个开发过程: 1)参考 Meteor React TUTORIAL教程 https://www.meteor.com/tutorials/react/creating-an-app 2). ...
- 网站开发只需数小时?Meteor 说这才是未来
原文: http://www.geekpark.net/topics/211573/ 那个想要挑战过去数十年沿用至今的网站开发模式的新势力来了. Meteor 是从 YC 孵化而出的现代网站开发平台, ...
- 【译】Meteor 新手教程:在排行榜上添加新特性
原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...
- POJ 3669 Meteor Shower【BFS】
POJ 3669 去看流星雨,不料流星掉下来会砸毁上下左右中五个点.每个流星掉下的位置和时间都不同,求能否活命,如果能活命,最短的逃跑时间是多少? 思路:对流星雨排序,然后将地图的每个点的值设为该点最 ...
- 如何在Meteor中使用npm模块?
首先,请在AtmosphereJs上搜索有无相关的封装包.尽量采用已有的封装包,而不是自己封装. 有两种方法在项目中使用来自npm的模块. 封装为Meteor包并在项目中添加包.使用meteor cr ...
- windows下Meteor+AngularJS开发的坑
有复杂的地方我再开贴记录,这里只记录容易解决的坑. 1. windows下手工增加smart package.直接将下载下来的包扔到meteor package中.记得将文件夹名字改得和smart.j ...
- Meteor + node-imap(nodejs) + mailparser(nodejs) 实现完整收发邮件
版本信息: Meteor:windows MIS安装 0.6.4 node-imap:npm指定的0.8.0版,不是默认的0.7.x版. mailparser:npm安装0.3.6 以下是记录踩到的 ...
- 手工给Meteor增加smart package的方法
windows下无法装mrt(Meteor的包管理工具).不过还好smart package本身也就只是一个文件夹而已,不需要在Meteor中注册什么东西.所以直接把smart package扔到me ...
随机推荐
- Django 路由 —— Djangon如何处理一个请求
Django URL路由概述 一个干净优雅的URL方案是高质量Web应用程序中的一个重要细则Django可以让你设计URL,无论你想要什么,没有框剪限制要为应用程序设计URL,您可以非正式地创建一个名 ...
- hasOneOf # if (data.otherDescArr.some(_ => '7'.indexOf(_) > -1)) {
if (data.otherDescArr.some(_ => '7'.indexOf(_) > -1)) { export const hasOneOf = (targetarr, ar ...
- 新时代web组件开发标准
VUE框架,则是遵行了这个标准. 1.html文件 <!DOCTYPE html><html><head lang="en"> <meta ...
- ES6(vue)对象词法扩展
ES6 允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作: function getCar(make, model, value) { retur ...
- 监控java进程是否正常运行
@echo off set _task=java.exe :checkstart for /f "tokens=1" %%n in ('tasklist ^| find " ...
- python 变量引用
最近在看<<流畅的python>>关于变量引用部分时,有一些自己的看法,就再次记录一下. 问题: # From flunet python example 8-8 class ...
- 小程序之Button组件,函数的调用与简单的逻辑
我们要实现一个简单的功能,在界面上放置一张图片,设置重新加载按钮,能更新图片. WXML代码: <!--index.wxml--> <view clas="index&qu ...
- KVM中的网络简介(qemu-kvm)
emu-kvm主要向客户机提供了如下4种不同模式的网络: 1)基于网桥(bridge)的虚拟网卡 2)基于NAT(Network Addresss Translation)的虚拟网络 3)QEMU内置 ...
- Solr5.0.0定时更新索引
由于通过配置的方式定时更新不生效,故通过代码执行定时任务更新 package com.thinkgem.jeesite.modules.meeting.task; import java.io.IOE ...
- 构造MaxTree
链接:https://www.nowcoder.com/questionTerminal/a502c7c3c65e41fdaf65eec9e0654dcb 来源:牛客网 [编程题]构造MaxTree ...