Meteor 中文入門指南



Q&A
span作用:

https://www.meteor.com/

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

  • 安裝Chocolatey
  • 在管理員權(quán)限下 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輸入
執(zhí)行策略更改:
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

指定的可執(zhí)行文件不是此操作系統(tǒng)平臺的有效應(yīng)用程序。
在 WebClient 請求期間發(fā)生異常。

解決方法:

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、在終端命令行鍵入命令 創(chuàng)建應(yīng)用模板

meteor create simple-todos

2、命令會創(chuàng)建名為simple-todos的文件夾

client/main.js        # a JavaScript entry point loaded on the client  一個(gè)加載在客戶端的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 服務(wù)端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內(nèi)部文件
.gitignore            # a control file for git  git控制文件

3冻河、運(yùn)行新建立的app

cd simple-todos
meteor

在瀏覽器中訪問:http://localhost:3000查看你的應(yīng)用
修改client/main.html頁面更改app界面

三、文件結(jié)構(gòu)

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文件并定義了三個(gè)頂級標(biāo)簽
<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> 標(biāo)簽中的的內(nèi)容都會做為客戶端HTML head部分的內(nèi)容,
同理芋绸,所有<body>標(biāo)簽中的內(nèi)容都會都作為body部分的內(nèi)容媒殉,就像常規(guī)的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>標(biāo)簽內(nèi)的內(nèi)容都會被編譯進(jìn) Meteor templates摔敛,HTML文件可以以以下方法引用Meteor tremplates

  • {{>templateName}}
  • Template.templateName (在JS腳本中調(diào)用)

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.

**同時(shí)廷蓉,body部分的內(nèi)容一可以在JavaScript中以Template.body的形式被引用,可以把它作為一個(gè)特殊的可以包含其他任何子模板的母模板


Adding logic and data to templates

向templates中添加邏輯操作與數(shù)據(jù)

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存儲模組數(shù)據(jù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末桃犬,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子行楞,更是在濱河造成了極大的恐慌攒暇,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件子房,死亡現(xiàn)場離奇詭異形用,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)证杭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進(jìn)店門田度,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人解愤,你說我怎么就攤上這事镇饺。” “怎么了送讲?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵奸笤,是天一觀的道長。 經(jīng)常有香客問我哼鬓,道長监右,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任魄宏,我火速辦了婚禮秸侣,結(jié)果婚禮上存筏,老公的妹妹穿的比我還像新娘宠互。我一直安慰自己,他們只是感情好椭坚,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布予跌。 她就那樣靜靜地躺著,像睡著了一般善茎。 火紅的嫁衣襯著肌膚如雪券册。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天,我揣著相機(jī)與錄音烁焙,去河邊找鬼航邢。 笑死,一個(gè)胖子當(dāng)著我的面吹牛骄蝇,可吹牛的內(nèi)容都是我干的膳殷。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼九火,長吁一口氣:“原來是場噩夢啊……” “哼赚窃!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起岔激,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤勒极,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后虑鼎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辱匿,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年炫彩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了掀鹅。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,973評論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡媒楼,死狀恐怖乐尊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情划址,我是刑警寧澤扔嵌,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站夺颤,受9級特大地震影響痢缎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜世澜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一独旷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧寥裂,春花似錦嵌洼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至诺舔,卻和暖如春鳖昌,著一層夾襖步出監(jiān)牢的瞬間备畦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工许昨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留懂盐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓糕档,卻偏偏與公主長得像允粤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子翼岁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容