美文网首页
Meteor 中文入门指南

Meteor 中文入门指南

作者: 绍重先 | 来源:发表于2017-12-07 19:08 被阅读0次


Q&A
span作用:

https://www.meteor.com/

一、Install 安装|使用包管理器Chocolately

  • 安装Chocolatey
  • 在管理员权限下 cmd输入
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
  • powershell输入
执行策略更改:
Run Get-ExecutionPolicy. If it returns Restricted, then run Set-ExecutionPolicy AllSigned or Set-ExecutionPolicy Bypass -Scope Process.

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Q&A

指定的可执行文件不是此操作系统平台的有效应用程序。
在 WebClient 请求期间发生异常。

解决方法:

Use Windows built-in compression instead of downloading 7zip
Set the following environment variable prior to install:
chocolateyUseWindowsCompression - this will bypass the download and use of 7zip.
In PowerShell, it looks like this:

$env:chocolateyUseWindowsCompression = 'true'
# install script

使用包管理器安装meteor(请保证C盘空间足够)

choco install meteor
Installing.png
Complete.png

二、基于blaze.js搭建入门App:simple-todos

1、在终端命令行键入命令 创建应用模板

meteor create simple-todos

2、命令会创建名为simple-todos的文件夹

client/main.js        # a JavaScript entry point loaded on the client  一个加载在客户端的JS脚本
client/main.html      # an HTML file that defines view templates 基于view 模板的HTML文件
client/main.css       # a CSS file to define your app's styles 定义客户端app样式的css
server/main.js        # a JavaScript entry point loaded on the server 服务端js脚本
package.json          # a control file for installing NPM packages NPM包控制文件
package-lock.json     # Describes the NPM dependency tree 描述NPM依赖包树
.meteor               # internal Meteor files  Meteor内部文件
.gitignore            # a control file for git  git控制文件

3、运行新建立的app

cd simple-todos
meteor

在浏览器中访问:http://localhost:3000查看你的应用
修改client/main.html页面更改app界面

三、文件结构

Now let's find out what all these bits of code are doing!

HTML files in Meteor define templates

Meteor parses HTML files and identifies three top-level tags:
Meteor 分析 HTML文件并定义了三个顶级标签
<head>,<body>, and<template>.

Everything inside any <head> tags is added to theheadsection of the HTML sent to the client,
Everything inside <body> tags is added to thebodysection, just like in a regular HTML file.

所有<head> 标签中的的内容都会做为客户端HTML head部分的内容,
同理,所有<body>标签中的内容都会都作为body部分的内容,就像常规的HTML文件一样。

Everything inside<template>tags is compiled into Meteor templates, which can be included inside HTML with
{{>templateName}}
or referenced in your JavaScript with
Template.templateName.

所有<template>标签内的内容都会被编译进 Meteor templates,HTML文件可以以以下方法引用Meteor tremplates

  • {{>templateName}}
  • Template.templateName (在JS脚本中调用)

Also, thebodysection can be referenced in your JavaScript withTemplate.body. Think of it as a special "parent" template, that can include the other child templates.

**同时,body部分的内容一可以在JavaScript中以Template.body的形式被引用,可以把它作为一个特殊的可以包含其他任何子模板的母模板


Adding logic and data to templates

向templates中添加逻辑操作与数据

All of the code in your HTML files is compiled with

Meteor's Spacebars compiler. Spacebars uses statements surrounded by double curly braces such as

{{#each}}and{{#if}}to let you add logic and data to your views.

You can pass data into templates from your JavaScript code by defininghelpers. In the code above, we defined a helper calledtasksonTemplate.bodythat returns an array. Inside the body tag of the HTML, we can use{{#each tasks}}to iterate over the array and insert atasktemplate for each value. Inside the#eachblock, we can display thetextproperty of each array item using{{text}}.

In the next step, we will see how we can use helpers to make our templates display dynamic data from a database collection.


四、用Collection存储模组数据

相关文章

  • Meteor 中文入门指南

    https://www.meteor.com/ 一、Install 安装|使用包管理器Chocolately 安装...

  • Python Tutorial笔记

    Python入门指南 中文版及官方英文链接: Python入门指南 (3.5.2)http://www.pytho...

  • Rxjs系列教程目录

    RxJS-中文文档RxJS-中文指南 rxjs学习入门心得(一)Observable可观察对象rxjs学习入门心得...

  • Elasticsearch教程集

    Elasticsearch 权威指南(中文版) Elasticsearch 官网 ElasticSearch入门 ...

  • git学习之好文推荐

    简单入门git - 简易指南 官方中文文档git-book

  • 初识Markdown

    Markdown入门指南中文版 和Markdown入门指南初次使用,参考的两篇文章。 一级标题-记录初衷 二级标题...

  • MarkDown使用

    Markdown入门指南中文版 和Markdown入门指南初次使用,参考的两篇文章。 一级标题-记录初衷 二级标题...

  • Xmind新手入门

    XMind新手入门完整攻略 Xmind使用技巧 XMind中文版快捷键指南

  • 简书Markdown编辑

    Markdown 语法说明 (简体中文版)Markdown——入门指南MarkdownPad 2 在线转换 建议您...

  • Redis入门使用手册 (Redis入门指南笔记)

    网站推荐 redis在线尝试与教程 redis中文官网 《Redis入门指南》 《Redis 设计与实现》 Red...

网友评论

      本文标题:Meteor 中文入门指南

      本文链接:https://www.haomeiwen.com/subject/dyejixtx.html