Back

meteor 入门初体验

发布时间: 2015-12-26 10:54:00

refer to: https://www.meteor.com/tutorials/blaze/creating-an-app

跟Rails相比,还是有很大短板的。对于rails熟手,不需要用这个。对于nodejs背景的同学,挺值得用。

槽点1: 

nodejs中的rails, 但是不如rails直观,调试速度不如rails (例如,刷新一次页面,居然需要一秒)。

槽点2:

 {{# each}} 之后还要 {{/each}}  , 不习惯 {{}}, 还是更喜欢  <%= %>

槽点3: 从controller中传递变量到view, rails中直接 @var1 , @var2 就好了。但是在meteor中,你可以在body. helper里,也可以指定在其他的helper中 。 (这里有点儿复杂了。)

个人感觉,在web开发方面,还是不如rails. 但是值得学习里面的思想,比如socket

应该也是one page app. 但是没有深入。 

安装

# mac, linux: 
$ curl https://install.meteor.com/ | sh

最好打开vpn. 否则会很慢。

hello world.

To get started fast:

  $ meteor create ~/hi_meteor
  $ cd ~/hi_meteor
  $ meteor   

可以看出, meteor 就是一个node组件( meteor vs. node = rails vs ruby ) 使用了mongodb, 跑在了3000端口上。

[[[[[ /workspace/hi_meteor ]]]]]              

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/

会新建一个文件夹和三个文件:hi_meteor.css hi_meteor.html hi_meteor.js

# html: 
<head>
  <title>hi_meteor</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

#  JS文件:
if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

可以看出, HTML中, <template> 是一个显示内容的模板, {{ > name }} 就显示  name 模板。相当于rails中的partial ( 会渲染出一段 html 片段), 变量要放在  js文件中的 Template.hello.helpers。

  {{ }} 则是表达式, 相当于 jsp, asp, rails中的 <%= %>

js代码中, 
if (Meteor.isClient)   中的代码,只针对于客户端生效。   Meteor.isServer只针对于服务器端生效。  里面的代码,跟ruby比起来,还是很麻烦的. 

template

内容比较多,参考: https://github.com/meteor/meteor/blob/devel/packages/spacebars/README.md

里面基本就是一个 erb 大全,包括: {{#each }}, {{#if }}, {{#with}}

操作数据库 和 model

meteor中似乎没有model 的概念。它可以在client和server中都操作mongodb (相信在 client中仅仅是发送ajax请求到server )  下面的代码是查询数据库中的所有Task

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

操作表单,写入数据库

先新增一个表单,表单只有一个字段: book 的名字:把以下代码放到html文件中:

    <form class='my_book'>
<input type='text' name='book' placeholder='type book title' />
</form>

把以下代码放到js文件中:放到  Meteor.isClient 中:

  Template.body.events({
    'submit .my_book': function(event){
      event.preventDefault();
      var text = event.target.book.value;
      console.info('text: ' + text);
      Books.insert({
        title: text,
        createAt: new Date()
      })
      event.target.book.value='';
    }   
  })  

可以看出, 需要获取对应表单的值的话,需要使用:   'submit .表单id',  function 中,必须加上: event.preventDefault(),防止页面刷新, 然后 (rails中获取表单的 params[:book] )等同于:  event.target.book.value  

相比之下,还是 rails中的更加直观。

修改删除,

也都基本一样, 为相关的link 加上click event, 然后在对应的function中 Books.update, Books.remove(this._id)

发布:

可以一键发布。 基本跟 capistrano一样。但是在我的机器上没有用过。

有内置的 用户管理系统。

用处不大。 官方的东西不一定就是我们想要的。

Back