阅读 373

Meteor笔记

Meteor

Meteor应用的文件结构

  • /server文件夹中的代码只会在服务端运行
  • /client文件夹中的代码只会在客户端运行
  • 其他代码则同时运行于服务端和客户端
  • /lib文件夹中的文件将被优先载入
  • 所有以main.*命名的文件将在其他文件载入后载入
  • 所有静态资源文件放在/public文件夹中

Blaze模版

定义一个模板

<template name="xx1"> //xx命名必须要唯一
 ...
</template>复制代码

引用一个模板

{{> xx1}}复制代码

相互嵌套

<template name="xx1"> //xx命名必须要唯一
 {{> xx2}}
</template>复制代码

条件

 {{#if true}}
    <p></p>
 {{else}}
    <p></p>
 {{/if}}复制代码

遍历

 {{#each arry}}
   <p>{{name}}---{{age}}</p>
 {{/each}}


arry:function () {
 return [{name:'11'},{age:22},{name:'11'},{age:22}]
}复制代码

上下文

模板动态数据业务逻辑helpers,有关一些动态数据的判断都写在helpers对象中

局部:仅仅在xxx模板中起作用

Template.xxx.helpers({
 ...
});复制代码

全局:任意模板中都可以调用该变量

Template.registerHelper('变量名',(a,b)=>{
  return a===b;
});

某模板内:
<input type="checkbox" checked={{变量名 select 'yes'}}>
Template.xxx.helpers({
  select:'yes'
});复制代码

事件绑定
模板内置了jQuery,也就是说平时我们在前台操作的dom,转在了后台写。

Template.xx.events({
  "click button":function(event,template){
      ...
  },
  "mouseenter #myid":function(event,template){
      ...
  }
});复制代码

模板的生命周期

Template.xxx.onCreated(function(){
  //模板的实例化完成,但是还看见,适合设置初始化的变量
  this.haha='123'; //设置初始化变量 ,想在helpers和events函数中获取到此变量使用Template.instance().haha;
});

Template.xxx.onRendered(function () {
  //dom已经在页面存在,用户可以看见了,需要用js操作dom就在此步进行操作
});

Template.xxx.onDestroyed(function () {
  //模板被销毁时候回调
});复制代码

MongoDB

meteor中使用的数据库是MongoDB

  • collection介绍

在mongodb中,collection相当于关系型数据库的表,但并不需提前创建,更不需要预先定义字段。
db.collect1.save({username:’mayj’,mail:’test@abc.com’})#向collect1中插入一条记录,collection会在第一次插入记录的时候自动创建。
db.collect1.save({username:’name2’,mail:’name2@abc.com’,age:28})#插入一条新记录,相对上条记录这次有三个key,类似三个字段。
db.collect1.find();#列出collect1中的所有记录。

在Meteor中创建一个新的collection使用:MyCollection = new Mongo.Collection("my-collection");,为了让这个Collection(我叫做集合吧)能在服务器和客户端使用,写在判断客户端还是服务器端的外面。
写好之后修改之前的JS,helper中返回集合的数据:

Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
  // This code only runs on the client
  Template.body.helpers({
    tasks: function () {
      return Tasks.find({});
    }
  });
}复制代码

Meteor可以使用的数据库操作API

find,findOne,insert,update,upsert,remove,allow,deny

insecure包

模拟每个客户端对服务器上的数据库拥有完全读/写权限的效果,通常生产环境需要移除这个包meteor remove insecure
这时如果创建一个清单,会发现多出一个清单又瞬间回到原样了,控制台显示update failed: Access denied,这就是延迟补偿:客户端上使用预读和模式模拟技术,使它看起来与数据库的连接是零延迟的
去掉了insecure包,需要修改代码

  • 方法一
// server
Tasks.allow({
    update: function(userId,doc,fieldNames,modifier){
        return true;
    }
});复制代码

如果返回true,允许客户端执行update操作,false时拒绝,也可以使用collection.deny方法来拒绝客户端修改数据库的请求。只有在客户端试图修改数据时才会触发,而服务器端不受这个限制

  • 方法二 通过Meteor.methodsMeteor.call的组合来实现客户端修改数据
//server
Meteor.methods({
    insert:function(task){
      Tasks.insert(task);
    }
});

//client
Template.task.events({
    'click .add': function () {
      Meteor.call('insert',{name:'Lin',skill: 'JS'});
    }
});复制代码

autopublish包

使用autopublish包,Meteor会客户端Minimongo中的内容和服务器端的MongoDB同步(除了users集合部分的内容和索引)通常生产环境也需要移除这个包meter remove autopublish

这时候客户端和服务器端的数据库就不同步了,假如我们有多个集合,可以选择性地从服务器端发布,然后从客户端订阅

//server
Meteor.publish("task",function(){
    return Tasks.find();
});

//client
Meteor.subscribe("task");复制代码
关注下面的标签,发现更多相似文章
评论