Q&A
span作用:
一、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 thehead
section of the HTML sent to the client,
Everything inside <body> tags is added to thebody
section, 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, thebody
section 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 calledtasks
onTemplate.body
that returns an array. Inside the body tag of the HTML, we can use{{#each tasks}}
to iterate over the array and insert atask
template for each value. Inside the#each
block, we can display thetext
property 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.