meteor 入门初体验

访问量: 2940

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一样。但是在我的机器上没有用过。

有内置的 用户管理系统。

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

订阅/RSS Feed

Subscribe