Meteor

File structure of Meteor applications

  • in/serverThe code in the folder will only run on the server
  • in/clientThe code in the folder will only run on the client side
  • The rest of the code runs on both the server and the client
  • /libFiles in folders will be loaded first
  • All tomain.*The named file will be loaded after other files have been loaded
  • All static resource files are placed in/publicfolder

Balze template

Defining a template

<template name="xx1">//xx name must be unique...</template>Copy the code

Referencing a template

{{> xx1}}Copy the code

Each nested

<template name="xx1">{{> xx2}}</template>Copy the code

conditions

 {{#if true}}
    <p>true</p>
 {{else}}
    <p>false</p>
 {{/if}}Copy the code

traverse

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


arry:function () {
 return [{name:'11'},{age:22},{name:'11'},{age:22}]
}Copy the code

context

Template dynamic data service logic helpers, the determination of dynamic data is written in the helpers object

Local: only works in XXX templates

Template.xxx.helpers({
 ...
});Copy the code

Global: This variable can be called from any template

Template.registerHelper('Variable name',(a,b)=>{
  returna===b; }); In a template: <input type="checkbox"Checked ={{variable name select'yes'}}>
Template.xxx.helpers({
  select:'yes'
});Copy the code

The event binding template has jQuery built in, which means that the DOM we normally manipulate in the foreground is written in the background.

Template.xx.events({
  "click button":function(event,template){... },"mouseenter #myid":function(event,template){... }});Copy the code

The template life cycle

Template.xxx.onCreated(function(){
  // The template is instantiated, but you can also see that it is appropriate to set initialized variables
  this.haha='123'; // Set the initialization variable to template.instance ().haha; // Set the initialization variable to template.instance ().haha;
});

Template.xxx.onRendered(function () {
  // The dom already exists on the page, the user can see it, need to use JS to manipulate the DOM in this step
});

Template.xxx.onDestroyed(function () {
  // Call back when the template is destroyed
});Copy the code

MongoDB

The database used in Meteor is MongoDB.

  • The collection is introduced

In mongodb, a collection is equivalent to a table in a relational database, but it does not need to be created in advance, let alone predefined fields. Db.collect1. save({username: ‘mayj’,mail: ‘[email protected]’})# Insert a record into collect1. The collection will be created automatically when the first record is inserted. Db.collect1. save({username: ‘name2’,mail: ‘[email protected]’,age:28})# Insert a new record with three keys, similar to three fields. db.collect1.find(); List all records in Collect1.

Create a new collection in Meteor using MyCollection = new mongo. collection (“my-collection”); In order for the Collection to be used on both the server and the client, it is written outside of the client or server side. After writing, modify the previous JS, and return the collection data in helper:

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

Database manipulation apis that Meteor can use

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

Insecure packet

Meteor Remove Insecure This package needs to be removed in the production environment. If I create a list, I will find that update failed is displayed on the console. Access denied, this is latency compensation: the client uses preread and mode emulation techniques to make it appear that the connection to the database is zero latency. The insecure package was removed, and I need to change the code

  • Methods a
// server
Tasks.allow({
    update: function(userId,doc,fieldNames,modifier){
        return true; }});Copy the code

If true, the update operation is allowed. If false, the update operation is denied. The collection.deny method can also be used to deny the database modification request. This is triggered only when the client tries to modify the data, and the server is not subject to this restriction

  • Method 2 throughMeteor.methodsandMeteor.callTo implement client modification of data
//server
Meteor.methods({
    insert:function(task){ Tasks.insert(task); }});//client
Template.task.events({
    'click .add': function () {
      Meteor.call('insert', {name:'Lin'.skill: 'JS'}); }});Copy the code

Autopublish package

With the Autopublish package, Meteor will synchronize the content in Minimongo on the client with MongoDB on the server (in addition to the content and indexes in the Users set). This package is also normally removed in production environments

If we have multiple collections, we can selectively publish from the server and then subscribe from the client

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

//client
Meteor.subscribe("task");Copy the code