您的位置：首页 > 其它

METEOR培训二，补

2016-07-11 00:00 232 查看

client文件夹下有三个文件，css,html ,js
咱们说html和js.
html代码如下：

[html]
view plain
copy

<head>

<title>simple</title>

</head>

<body>

<h1>Welcome to Meteor!</h1>

{{> hello}} 模板名称

{{> info}}

{{> items}} template 模板

</body>

<template name="hello">

<button>Click Me again</button>

<p>You've pressed the button {{counter}} times.</p>

</template>

<template name = "info">

<h2>Learn Meteor!</h2>

<ul>

<li><a href="https://www.meteor.com/try">Do the Tutorial</a></li>

<li><a href="http://guide.meteor.com">Follow the Guide</a></li>

<li><a href="https://docs.meteor.com">Read the Docs</a></li>

3ff0
<li><a href="https://forums.meteor.com">Discussions</a></li>

</ul>

</template>

<template name="items">

<button>Click Me again</button>

<p>You've pressed the button {{counter}} times.</p>

</template>

在html中，出现了一些

[html]
view plain
copy

{{> hello}} 模板名称

{{> info}}

{{> items}} template 模板

在，<body></body>中。

然后，在body的外面，定义了一些<template >
可以理解为，在body里面，需要对用到的模板进行声明，然后，在body外面，在写具体的模板代码。
模板引用，就是用{{<模板名称}}
模板的实例，就是<template name = "模板名称"></template>
模板中也可以引用模板。
有模板的实例，就必须要有模板的引用，否则，在客户端是看不见模板的数据的。
在模板中，可以用一些语法，类似于

{{#}} spacesbar语法

叫做spacebar。
{{# each data}}
很简单明确，这个是循环，一个模板中，使用循环语法，则这句会循环输出。
这里的data，属于方法输出的数据，后面再介绍。
{{/each}}
{{#with date}}
{{/with}} 等等其他的语法。
这些方法都是为了方便渲染页面数据的。
简单的说，html里面，就是各种模板，模板嵌套模板。来渲染数据的。
当然，现在并没有用其他第三方的包，如果引用其他第三方的包来渲染页面和加载数据，会更加简单的。
××××××××××××××××××××××××××××××××
然后说，main.js，代码如下。

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});

Template.hello.helpers({
counter() {
return Template.instance().counter.get();
Meteor.call("",function(e,r){

})
},
});

Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});

代码上方，是导入第三方类库，import。

然后下面，对应每个模板，都有一系列的操作，比如，我有一个模板，名称叫做，hello, <template name ="hello"></template>
就可以在JS中定义这样一系列方法。比较常用的有下面四个，还有一些其他不常用的方法。

Template.hello.onCreated

Template.hello.onRendered

Template.hello.events

Template.hello.helpers

分别是，

1、hello模板创建时，执行的方法。

2、模板加载完成后执行的方法。

3、模板中，响应的一些事件，比如,onblur,onclick,keydown等等

4、数据处理的方法。

Meteor.call("methodTest",function(e,r){

});

这个方法的意思是，到server，服务端，找到方法methodTest,并执行这个方法，function为回调函数，e，是error，r,是response。
可以针对方法执行后返回的结果进行操作并进行下一步处理。
××××××××××××××××××××××××××××××××××××
然后说server。
这个demo中，在server中的代码比较少，

Meteor.methods({
methodTest: function()
{
return HTTP.get("http://ipinfo.io/ip/").content;
},
})

在server/main.js中，定义methodTest，client,就可以通过meteor.call来调用这个方法了。[/code]

×××××××××××××××××××××××××

both

这个文件夹下面的内容也比较少，因为不是实际项目，只是一个demo。

只有自己定义的一个JS文件，里面只有一行代码。

MyColect=new Meteor.Collection("DBcollnection");

这句话的意思是，创建一个对于数据库中 DBcollnectio （类似表）其中有name,pwd，等等字段。[/code]

<template name="hello">
{{#each date}}
<tr>
<td>{{user}}</td>
<td>{{pwd}}</td>
<td>{{getTime}}</td>
</tr>
{{/each}}
</template>

在JS里，会这样写。

Template.hello.helpers({
date:MyColect.find(),
getTime(){
return moment(this.insertTime).format('llll')
}
});

date，会获取所有的记录，getTime方法，会获取时间。moment，是第三方类库。

html中{{ }}会输出，date，或者getTime方法的数据。

这里有一个很有用的地方，就是，如果你这个hello模板的，each中，再引用另外的模板，那么，子模板，可以继承父模板的数据。

meteor,自带mongoDB.

还有，如果需要配置数据库，在这个地方进行配置。

配置完成后，就可以用我在both中写的方法进行引用了。

写的可能不完善，还有遗漏，后期会不定时更新，如果任何问题或者疑问，欢迎加QQ：1286238812,共同学习提高。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航