本文共 26977 字，大约阅读时间需要 89 分钟。
构建meteor应用程序
Meteor.js is an open-source platform built on Node and MongoDB. It's not just a framework, it's more than that.
Meteor.js是基于Node和MongoDB构建的开源平台。 它不仅是一个框架，而且还更多。
Is it comparable to Angular? Angular handles just the frontend parts of application. Meteor is more of a platform than Angular. It is both server and client-side code and handles a lot of the parts of applications that we need to create manually in Angular.
它可与Angular相媲美吗？ Angular仅处理应用程序的前端部分。 流星比Angular更像一个平台。 它既是服务器端代码，又是客户端代码，它处理了我们需要在Angular中手动创建的应用程序的许多部分。
We'll be diving into a simple application in this tutorial to show off the benefits and power of Meteor.
在本教程中，我们将深入研究一个简单的应用程序，以展示Meteor的好处和功能。
We'll be creating a very simple polling application where a user can:
我们将创建一个非常简单的轮询应用程序，用户可以在其中进行以下操作：
Let's create our first Meteor app!
让我们创建第一个Meteor应用程序！
meteor --version
Meteor comes with a few demo applications that you can try out. If you want to check out a few demo apps now, you can go into your command line and grab the demo application using:
流星附带了一些演示应用程序，您可以尝试。 如果您现在想签出一些演示应用程序，则可以进入命令行并使用以下方法获取演示应用程序：
// todo sample appmeteor create --example todos// example mobile applicationmeteor create --example localmarket
You can find the full list of examples in the .
您可以在找到示例的完整列表。
Once you create a demo app, just cd into that project and run the application with:
一旦你创建了一个演示应用程序，只是cd转化项目并运行应用程序：
meteor
This will grab the necessary packages, bundle all the css and js, start your application using a Node server, and make it viewable in your browser.
这将获取必要的软件包 ， 捆绑所有css和js ， 使用Node服务器启动应用程序 ，并使其在浏览器中可见。
Here is the sample Todos application which is quite good looking:
这是示例Todos应用程序，看起来很不错：
Definitely click around the files in these demo applications and you'll see how Meteor apps tick. Let's move onto creating our own application now.
绝对单击这些演示应用程序中的文件，您将看到Meteor应用程序如何打勾。 现在让我们继续创建自己的应用程序。
With our newly installed Meteor CLI tools, we can easily create a new application with:
借助我们新安装的Meteor CLI工具，我们可以轻松创建具有以下内容的新应用程序：
meteor create polling
polling will be the name of our new application and it will be created in a new polling/ folder. This command will create 3 new files and a folder:
polling将是我们新应用程序的名称，它将在新的轮询/文件夹中创建。 此命令将创建3个新文件和一个文件夹：
| .meteor/ // holds information about our project| polling.css // the css for our project| polling.html // the overall template| polling.js // javascript for the client and server
This is a very barebones setup and will not be how we structure our application, but it is useful to see how a very simple application can be built.
这是一个非常准系统的设置，将不会是我们构建应用程序的方式，但是了解如何构建一个非常简单的应用程序会很有用。
You can run this app by cding into your new project and starting your meteor app with:
您可以运行这个程序通过cd ING到您的新项目，并开始与您的流星应用：
meteor
Then you can view it in the browser at
然后您可以在浏览器中的查看它
If you take a quick look into polling.js you'll see some JavaScript bindings to the Template (which is referencing our polling.html file). What you'll also find is two interesting lines of code that are how Meteor separates code that will be run on the server vs the client.
如果快速polling.js您会看到一些到Template JavaScript绑定（引用了我们的polling.html文件）。 您还会发现两条有趣的代码行，它们是Meteor分离将在服务器与客户端上运行的代码的方式。
if (Meteor.isClient) { // code here will only be run on the client}if (Meteor.isServer) { // code here will only be run on the server} While we could build our whole application like this, with client and server code in the same file, I prefer to have our application structured so that we don't have to worry about where our client and server code is.
尽管我们可以这样构建整个应用程序，但客户端和服务器代码在同一个文件中，但我更喜欢对应用程序进行结构化，这样我们就不必担心客户端和服务器代码在哪里。
Keep that meteor command running for the duration of this tutorial. As we make changes to our application, Meteor will automatically restart the server, rebundle our files, and livereload our browser (while keeping all our data). Talk about convenient!
在本教程中，请继续运行该meteor命令。 当我们对应用程序进行更改时， Meteor将自动重新启动服务器，重新打包文件，并实时重新加载浏览器（同时保留所有数据） 。 讲方便！
Luckily, Meteor has a few folders that are designed specifically for organizing our application. These folders are:
幸运的是，Meteor拥有一些专门用于组织我们的应用程序的文件夹。 这些文件夹是：
<img src="images/underwater-dogs.jpg">. public / ：默认情况下，Meteor将在您的项目中找到CSS和JS文件并将它们捆绑在一起。 该公共文件夹中的任何内容都不会被Meteor捆绑，而是直接按原样提供给客户端。 如果您在public / images / underwater-dogs.jpg上有一张图片，则可以使用<img src="images/underwater-dogs.jpg">从HTML引用该文件。 What's cool is that with this structure, we won't need to defined Meteor.isClient or Meteor.isServer anymore. If a file is in that folder, then Meteor knows which side of our application it belongs.
很棒的是，有了这种结构，我们不再需要定义Meteor.isClient或Meteor.isServer 。 如果文件在该文件夹中，则Meteor知道它属于我们应用程序的哪一侧。
With these reserved folders in mind, let's look at how our application structure will look like:
考虑到这些保留的文件夹，让我们看一下我们的应用程序结构如何：
| .meteor| client/ // all the code for our client and browser |----- components/ // we'll be creating components for our application parts |--- poll-form.css |--- poll-form.html |--- poll-form.js |--- poll.css |--- poll.html |--- poll.js |----- app.body.html // layout for our entire app |----- app.head.html // document head for entire app |----- app.js // the overall js for our layout |----- app.css // the overall css for our layout| collections/ // here we'll store our mongo models |----- polls.js // defining our mongo collection| server/ // code for our server |----- bootstrap.js // adding sample data on app startup
client/ will be the folder where we spend most of our time. We'll go through all of the components, views, CSS/JS in the next section.
client /将是我们大部分时间的文件夹。 在下一节中，我们将介绍所有组件，视图，CSS / JS。
client/components/ will hold the different parts of our application. In this case, we just need a form to create polls and a component to show the individual polls. All JS and CSS files in the client folder will be bundled together by Meteor into our application so we're naming these files is done however we want. They'll all go to the same place anyway.
客户/组件/将保留我们应用程序的不同部分。 在这种情况下，我们只需要一个用于创建民意测验的表单和一个用于显示各个民意测验的组件。 客户文件夹中的所有JS和CSS文件都将被流星捆绑在一起到我们的应用程序中，因此我们可以根据需要命名这些文件。 无论如何，他们都会去同一个地方。
server/ will only contain one thing for now. We'll create a bootstrap.js file to seed our database with some sample data.
服务器/目前仅包含一件事。 我们将创建一个bootstrap.js文件，为我们的数据库添加一些示例数据。
collections/ is where we define Mongo collections. In this case, we'll only need one called polls.js.
collections /是我们定义Mongo集合的地方。 在这种情况下，我们只需要一个名为polls.js 。
routes.js will be in the root of our folder since the routes will be used in both the client and the server.
由于路由将同时在客户端和服务器中使用，所以route.js将位于我们文件夹的根目录中。
Take a look at the docs for more on .
查看有关更多有关的文档。
We're going to start with the server and the collections part of our application first.
我们将从应用程序的服务器和集合部分开始。
MongoDB is very simple to work with and we've gone over MongoDB in our article: . For our purpose for this application, we will be defining a single collection. Let's do that now.
MongoDB的使用非常简单，我们已经在文章： 了MongoDB。 为了达到此应用程序的目的，我们将定义一个集合。 现在开始吧。
Create the collections/polls.js file and fill it with:
创建collections / polls.js文件，并填充以下内容：
Polls = new Mongo.Collection('polls'); Easy! The reason we define this in a collections/ folder and not in the client/ or the server/ folder is that this collection will be needed on both the server (creating sample polls) and client (creating new polls).
简单！ 我们在collections /文件夹中而不是在client /或server /文件夹中定义此原因的原因是，服务器（创建样本民意调查）和客户端（创建新民意调查）都需要此集合。
We are re-using code on the server and client and this is what makes Meteor such a breeze to work with. With the Mongo collection out of the way, let's create some sample data.
我们正在服务器和客户端上重用代码，这就是使Meteor轻而易举地使用的原因。 摆脱了Mongo的收集，让我们创建一些示例数据。
Let's create some sample data for our application before we start to create the client-side part of our polling application. In the server/ folder, create a new file called bootstrap.js.
在开始创建轮询应用程序的客户端部分之前，让我们为应用程序创建一些示例数据。 在服务器/文件夹中，创建一个名为bootstrap.js的新文件。
Here is the full commented code for bootstrap.js:
这是bootstrap.js的完整注释代码：
// run this when the meteor app is startedMeteor.startup(function() { // if there are no polls available create sample data if (Polls.find().count() === 0) { // create sample polls var samplePolls = [ { question: 'Is Meteor awesome?', choices: [ { text: 'Of course!', votes: 0 }, { text: 'Eh', votes: 0 }, { text: 'No. I like plain JS', votes: 0 } ] }, { question: 'Is CSS3 Flexbox the greatest thing since array_slice(bread)?', choices: [ { text: '100% yes', votes: 0 }, { text: '200% yes', votes: 0 }, { text: '300% yes', votes: 0 } ] } ]; // loop over each sample poll and insert into database _.each(samplePolls, function(poll) { Polls.insert(poll); }); }}); We are using the Meteor.startup command to run this code when our server starts up. We're going to check if there are any polls already created in our database and create sample polls if there is nothing in the database.
服务器启动时，我们使用Meteor.startup命令运行此代码。 我们将检查数据库中是否已经创建了任何民意调查，如果数据库中没有任何内容，则创建样本民意调查。
Quick Note: If you ever want to clear what's in your database, just run meteor reset and your application will become a clear slate.
快速说明 ：如果您想清除数据库中的内容，只需运行“ meteor reset ，您的应用程序就会变得清晰起来。
Since Meteor implements an instance of , we are able to run MongoDB commands right in our browser's console. Meteor already restarted our application so that means it should've already ran that bootstrap.js file and created our sample polls.
由于Meteor 实现了的实例，因此我们能够在浏览器的控制台中直接运行MongoDB命令。 Meteor已经重新启动了我们的应用程序，因此这意味着它应该已经运行了bootstrap.js文件并创建了示例民意调查。
Let's go into our browser and see our polls. Go into your browser's console and run the Mongo command to find all the Polls:
让我们进入浏览器，查看我们的民意调查。 进入浏览器的控制台并运行Mongo命令以查找所有Polls ：
Polls.find().fetch()
You'll see the two polls we created!
您会看到我们创建的两个民意调查！
We now have the foundation we need to start building our polling application's frontend. We now have:
现在，我们有了开始构建轮询应用程序前端所需的基础。 我们现在有：
Let's move onto the thing that our users will actually see, the UI!
让我们继续我们的用户将实际看到的东西，UI！
app.js
app.js
Meteor will find all references of <head> and <body> and combine whatever it finds to one <head> and <body>. So if you have multiple files that have a <body> or <head>, they will all be compiled into your final document.
流星将找到<head>和<body>所有引用，并将找到的所有内容组合到一个<head>和<body> 。 因此，如果您有多个具有<body>或<head> ，它们都将被编译成最终文档。
Check the docs for more on .
检查文档以获取有关更多信息。
Here is what our app.body.html and app.head.html files will consist of:
这是我们的app.body.html和app.head.html文件组成的内容：
{ { >pollForm }}{ { #each polls }} { { >poll }} { { /each }}
{ { >pollForm }} will find a file with <template name="pollForm> within it. We will create this file next. The { { >templateName }} syntax will be how we pull in different views from our application.
{ {> pollForm}}将在其中找到一个带有<template name="pollForm>文件。我们接下来将创建此文件。 { { >templateName }}语法将是我们从应用程序中提取不同视图的方式。
{ { #each polls }} will loop over the polls object and then show the template named poll. We'll look at how we pull in this polls object from our database soon.
{ {#each polls}}将遍历polls对象，然后显示名为poll的模板。 我们将研究如何尽快从数据库中提取此polls对象。
Here is the very simple <head> of our app. Meteor will inject all the requirements into this section.
这是我们应用程序的非常简单的 <head> 。 Meteor将把所有需求注入此部分。
My Polling App!
Now that we have the main template down, let's create the two templates that we referenced: pollForm and poll.
现在我们有了主模板，让我们创建引用的两个模板： pollForm和poll 。
This will store the form for creating polls:
这将存储用于创建民意调查的表单：
We'll just limit users to creating 3 options for now to keep things simple. In the future, you could add a plus button that adds an input for choices.
为了使事情变得简单，我们现在仅限制用户创建3个选项。 将来，您可以添加加号按钮，为选择项添加输入。
Here's some quick CSS to style the question group a little differently than the option inputs. We'll place this in poll-form.css.
这是一些快速CSS，其样式与选项输入略有不同。 我们将其放置在poll-form.css 。
.question-group { margin-bottom:20px; background:#EEE; padding:20px;}.question-group label { font-size:18px;} Let's go back to our browser and see what our cool application looks like now.
让我们回到浏览器，看看我们酷的应用程序现在看起来是什么样子。
Pretty lackluster so far. This is because none of our Bootstrap classes will work because we never got Bootstrap CSS and added it to our project. We'll handle processing this form and then create our poll template. After that we'll move onto getting Bootstrap.
到目前为止还很乏味。 这是因为我们的Bootstrap类都不起作用，因为我们从未获得过Bootstrap CSS并将其添加到我们的项目中。 我们将处理此表单，然后创建我们的poll模板。 之后，我们将继续获取Bootstrap。
This will be the poll template for showing off single polls.
这将是用于展示单个民意测验的poll模板。
{ { question }}
{ { #each indexedArray choices }} { { votes }} { { text }} { { /each }}
We will be displaying the question, choices, votes, and text associated with the poll.
我们将显示与民意调查相关的问题 ， 选择 ， 投票和文本 。
How do we get these polls to show? In our original app.body.html file, we referenced the polls using { { #each polls }}. We are also adding in data-id with the _index so that we'll be able to know which question to apply our vote to.
我们如何显示这些民意调查？ 在我们原始的app.body.html文件中，我们使用{ { #each polls }}引用了民意{ { #each polls }} 。 我们还在_index添加了data-id ，以便我们能够知道将投票应用于哪个问题。
Let's give our body access to this object from our database now.
现在，让我们的身体从数据库中访问该对象。
We can easily assign variables to our body template by going into our app.js file and creating:
通过进入app.js文件并创建以下内容，我们可以轻松地将变量分配给我们的主体模板：
Template.body.helpers({ polls: function() { return Polls.find(); }}); Just like we used the Polls collection earlier, we can use it now to grab all our polls. This will give access to the polls object within our body template.
就像我们之前使用Polls集合一样，我们现在可以使用它来获取所有民意调查。 这将允许访问我们body模板中的polls对象。
Notice we also added an indexedArray to the choices each. This is because we don't inherently have the index when we loop over items in Meteor right now. That will probably change in the future, but it isn't implemented currently because of the reactive nature of the templating engine. Apparently $index in these real-time applications is a harder thing to pull off.
注意，我们还为每个choices添加了indexedArray 。 这是因为当我们现在在Meteor中循环浏览项目时，我们固有地没有索引。 这种情况将来可能会改变，但是由于模板引擎的React性，目前尚未实现。 在这些实时应用程序中，显然$ index很难实现。
We need to create this indexedArray helper so let's go back into app.js and add the following:
我们需要创建这个indexedArray帮助器，让我们回到app.js并添加以下内容：
// adds index to each itemUI.registerHelper('indexedArray', function(context, options) { if (context) { return context.map(function(item, index) { item._index = index; return item; }); }}); Thanks to for the above helper. We now have access to the data-id={ { _index }}. We'll use this when we implement our voting features.
感谢的上述帮助。 现在，我们可以访问data-id={ { _index }} 。 当我们实现投票功能时，将使用此功能。
Now we can see our polls that we created in our bootstrap.js file showing in our application.
现在，我们可以看到在bootstrap.js文件中创建的民意测验显示在应用程序中。
Let's wire up our form now to handle form submission.
让我们现在连接表单以处理表单提交。
Meteor has a cool way of attaching events and variables to its templates. Currently, we have a pollForm template. Let's go into the poll-form.js file and add event handlers for our form submission.
流星有一种很酷的方式将事件和变量附加到其模板。 当前，我们有一个pollForm模板。 让我们进入poll-form.js文件并为表单提交添加事件处理程序。
client/components/poll-form.js
client/components/poll-form.js
Template.pollForm.events({ // handle the form submission 'submit form': function(event) { // stop the form from submitting event.preventDefault(); // get the data we need from the form var newPoll = { question: event.target.question.value, choices: [ { text: event.target.choice1.value, votes: 0 }, { text: event.target.choice2.value, votes: 0 }, { text: event.target.choice3.value, votes: 0 } ] }; // create the new poll Polls.insert(newPoll); }}); Template.pollForm.events is how we attach events to this specific template. We are defining an event to handle the submit form event.
Template.pollForm.events是我们将事件附加到此特定模板的方式。 我们正在定义一个事件来处理submit form事件。
We can pull data from the form inputs using event.target.{input_name}.value.
我们可以使用event.target。{input_name} .value从表单输入中提取数据。
After we have gotten all the data we need, we are going to insert the new poll into our database using Polls.insert() just like we did in our bootstrap.js file on the server-side of things. Go ahead and use your form to submit data and you'll find that the new poll automatically gets added to the list of polls.
在获得所需的所有数据之后，我们将使用Polls.insert()将新的民意调查插入到数据库中，就像在服务器端的bootstrap.js文件中所做的一样。 继续并使用表单提交数据，您会发现新的民意调查会自动添加到民意调查列表中。
We've added polls to our overall template in app.js, handled processing the poll form in poll-form.js; now we will handle the last action, which is voting in the corresponding JS file, poll.js.
我们在app.js的整体模板中添加了polls并在poll-form.js处理了民意调查表单； 现在，我们将处理最后一个动作，即在相应的JS文件poll.js 。
Inside of client/components/poll.js, let's attach events to our template:
在client/components/poll.js ，让我们将事件附加到模板中：
// attach events to our poll templateTemplate.poll.events({ // event to handle clicking a choice 'click .vote': function(event) { // prevent the default behavior event.preventDefault(); // get the parent (poll) id var pollID = $(event.currentTarget).parent('.poll').data('id'); var voteID = $(event.currentTarget).data('id'); // create the incrementing object so we can add to the corresponding vote var voteString = 'choices.' + voteID + '.votes'; var action = {}; action[voteString] = 1; // increment the number of votes for this choice Polls.update( { _id: pollID }, { $inc: action } ); }}); A fun thing we can do to traverse the DOM is to use jQuery to call the current event and then find exactly what we need. To update the vote number for what was just clicked, we will need to get the parent ID of the poll and then the index of what was just clicked.
我们可以遍历DOM的一个有趣的事情是使用jQuery调用当前事件，然后准确地找到我们需要的东西。 要更新刚刚单击的内容的投票号，我们需要获取民意调查的父ID，然后获取刚刚单击的内容的索引。
We will be using MongoDB's operator to add 1 to the vote. Go ahead and click through your application and vote, and you'll see the votes increment.
我们将使用MongoDB的运算符在表决中加上1。 继续并单击您的应用程序并投票，您将看到投票数增加。
You may also be able to see other users voting in real time!
您还可以实时查看其他用户的投票！
This is some very simple templating here with the built in Meteor features. For future larger projects, we'll probably want to look at a routing solution like , currently the most popular Meteor package in , Meteor's packages site.
这是内置流星功能的一些非常简单的模板。 对于将来的大型项目，我们可能需要考虑一个路由解决方案，例如 ，这是Meteor的软件包站点目前最受欢迎的Meteor软件包。
Let's install Bootstrap to get some quick styling for our application. The thing to know about Meteor packages is that you only need to install them to get them to work.
让我们安装Bootstrap以获得我们应用程序的一些快速样式。 关于Meteor软件包的了解是，您只需安装它们即可使它们工作。
Traditionally, to get Bootstrap, you would:
传统上，要获得Bootstrap，您将：
<link> tag in your project's <head> 在项目的<head>使用<link>标记添加Bootstrap In Meteor, all you have to do is install Bootstrap and it's automatically applied to your project. Meteor's build system will include the CSS on its own.
在Meteor中，您所要做的就是安装Bootstrap，它会自动应用于您的项目 。 流星的构建系统将单独包含CSS。
Let's install Bootstrap found in .
让我们安装的Bootstrap。
meteor add twbs:bootstrap
Now, if we go look at our application, we'll see that our styling is there!
现在，如果我们看一下我们的应用程序，就会发现我们的样式在那里！
Note: You could also do things the old fashioned way of grabbing the Bootstrap file and adding it to your public/ folder and then linking to it in the document <head> if you want to go that route.
注意：您也可以采用老式的方式来处理Bootstrap文件，并将其添加到public /文件夹，然后在文档<head>链接到该文件<head>如果要执行此操作）。
In addition to having Bootstrap, let's add some of our own styles real quick to app.css to get our grid of polls looking a bit better:
除了使用Bootstrap之外，我们还可以快速向app.css添加一些自己的样式，以使民意调查表看起来更好一些：
Let's make our polls use to make it easier to create a grid of polls.
让我们使民意调查使用使其更容易创建民意调查网格。
Inside of app.css, let's add some quick styling:
在app.css内部，让我们添加一些快速样式：
body { padding-top:50px; }.polls { display:flex; flex-flow:row wrap; justify-content:center;}.poll { width:25%; margin:20px;} We now have a decent looking application with the basic functionality of a polling application!
现在，我们有了一个外观不错的应用程序，它具有轮询应用程序的基本功能！
Since our application is still in development mode, all collections are automatically published from our server and subscribed to on our client. We probably won't want this behavior in our production applications since it doesn't make sense for users of our application to subscribe to EVERY part of our application, even the parts they aren't using at any one time.
由于我们的应用程序仍处于开发模式，因此所有集合都将从我们的服务器自动发布并在我们的客户端上订阅。 我们可能不希望在生产应用程序中出现这种行为，因为对于我们的应用程序用户而言，预订应用程序的每个部分，甚至是他们一次不使用的部分，都没有意义。
It makes more sense to only have a user subscribed to the data that they are seeing at any one time. If you go look into .meteor/packages to see the packages in your Meteor application, you'll see one called autopublish. This will need to be removed and then you'll have to publish and subscribe to data manually in your application.
只让用户订阅他们在任何时候看到的数据更有意义。 如果您查看.meteor / packages来查看Meteor应用程序中的软件包，则会看到一个名为autopublish 。 这将需要删除，然后您必须在应用程序中手动发布和订阅数据。
To remove this package, use:
要删除此软件包，请使用：
meteor remove autopublish
Then you can use and .
然后，您可以使用和 。
Now we want the whole world to see our super cool new application. We can use Meteor's servers to show off our application.
现在，我们希望全世界看到我们的超酷新应用程序。 我们可以使用Meteor的服务器来展示我们的应用程序。
With one simple command, our entire app will be available online:
通过一个简单的命令，我们的整个应用程序将可以在线使用：
meteor deploy scotch.meteor.com
You can change out the subdomain for anything you like as long as it isn't already taken. We'll explore deploying to your own servers in future articles.
您可以根据需要更改子域，只要它还没有被使用即可。 在以后的文章中，我们将探讨如何部署到您自己的服务器。
Meteor provides so many great tools to easily and quickly prototype your applications. Real-time, JavaScript client and server-side, the packages system, build system, minimongo, and so much more.
Meteor提供了许多出色的工具，可轻松快速地对应用程序进行原型制作。 实时，JavaScript客户端和服务器端，软件包系统，构建系统，minimongo等。
Hopefully this has given you a good taste of how quickly you can build an application in Meteor.
希望这使您对在Meteor中构建应用程序的速度有了很好的了解。
翻译自:
构建meteor应用程序
转载地址：http://yjywd.baihongyu.com/