关于React在meteor钟的使用
引言
作为一个技术爱好者，自己也一直小倒腾一些东西，自己学习使用meteor.js已经快一年了，应该说作为一个现代web快速开发框架，确实有其独到的地方，现在将自己的一些积累携程博客，分享给大家。
说到meteor，当然首先需要说reactive编程或是（反应式编程模式）。个人认为这是meteor作为实时web系统十分突出的一点，就像他自己标榜的特点一样： 全栈式编程：统一了客户端、服务器端代码（本质上是node.js的实现） 反应式编程：数据变化与现实实时统一（数据变化，界面也变化，而且是跨浏览器的同步） 继承mogodb数据库（现在也支持一些其他的） 当然还有很多优点，这里不一一举例。应该说meteor是已经成为一个自成体系的开发生态环境，有自己的闭合组件支持(https://atmospherejs.com），支持通用的服务器端nodejs代码，可以有效建融目前主要的web开发技术（jqeury、模板、路由、bootstrap、less、coffeescript等等）
今天主要谈Reactjs在moteor钟的使用，这是一个新的话题，目前meteor1.2准备将其纳入内置模块钟，我也是边学边写。
认识React
http://facebook.github.io/react/ React是一种UI控件技术，通过js方式编写可以服用，方便维护的UI控件。（数据绑定、模板技术等） 本省其与meteor不是紧密绑定的，meteor有自己的模板系统，也有自己的数据绑定方式，只不过使用其作为业务显示模块的补充，是一个比较好的方式。
React的几个概念
JSX
JSX是一种文件格式定义，是在决赛中同时编写xml类似的数据显示格式，通过jsx编译器将其统一变异成规格化的js代码而已，是讲显示、数据、时间操作等统一在一汽实现的模式。具体例子可以见下面。
纯粹React例子
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
JSX文件例子
React.render( <h1>Hello, world!</h1>, document.getElementById('example'));
在meteor中使用react
1、安装：
meteor add react以上过程已经安装jsx编译器，react-meteor-data，react-template-helper等
2、在页面上直接使用即可，代码如下：
var App = React.createClass({ render() { return <div>Hello world!</div>; }});
if (Meteor.isClient) { Meteor.startup(function () { React.render(<App />, document.getElementById('root')); });}
3、绑定meteor的mongo.collection
var Tasks = new Mongo.Collection("tasks");
var App = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
// This method knows how to listen to Meteor's reactive data sources,
// such as collection queries
return {
// Return an array with all items in the collection
tasks: Tasks.find().fetch()
};
},
render() {
return (
<ul>
{/* Access the data from getMeteorData() on this.data */}
{this.data.tasks.map(function (task) {
return <li key={task._id}>{task.content}</li>;
})}
</ul>
);
}
});
if (Meteor.isClient) {
Meteor.startup(function () {
React.render(<App />, document.getElementById('root'));
});
}
4、通过用户动过操作数据（更新等）
var Tasks = new Mongo.Collection("tasks");
var List = React.createClass({
mixins: [ReactMeteorData],
getMeteorData() {
// This function knows how to listen to Meteor's reactive data sources,
// such as collection queries
return {
// Returns an array with all items in the collection
tasks: Tasks.find().fetch()
}
},
render() {
return (
<ul>
{/* Access the data from getMeteorData() on this.data */}
{this.data.tasks.map(function (task) {
return <li key={task._id}>{task.content}</li>;
})}
</ul>
);
}
});
var NewTaskForm = React.createClass({
onSubmit(event) {
event.preventDefault();
var taskContent = React.findDOMNode(this.refs.content).value;
Meteor.call("insertTask", {
content: taskContent
});
React.findDOMNode(this.refs.content).value = "";
},
render() {
return (
<form onSubmit={this.onSubmit}>
<input type="text" ref="content" placeholder="Add a task..." />
</form>
);
}
})
var App = React.createClass({
render() {
return (
<div>
<List />
<NewTaskForm />
</div>
);
}
});
Meteor.methods({
insertTask: function (task) {
// Validate the data
check(task, {
content: String
});
// Insert into MongoDB and Minimongo
Tasks.insert(task);
}
});
if (Meteor.isClient) {
Meteor.startup(function () {
React.render(<App />, document.getElementById('root'));
});
}
5、整合meteor的模板技术
模板定义如下：
<template name="userDisplay">
<div>Hello, {{username}}</div>
<div>{{> React component=UserAvatar userId=_id}}</div>
</template>
js代码如下：
var UserAvatar = React.createClass( ... );
Template.userDisplay.helpers({
UserAvatar() {
return UserAvatar;
}
})
注意：a、以上模板中的React控件包含在一个有且仅有一个子节点的元素钟（子节点就是React控件），否则失败；2、不能模板只包含React控件，而不指定父元素
6、模板钟React控件的操作事件
Template.userDisplay.helpers({
onClick() {
var self = Template.instance();
// Return a function from this helper, where the template instance is in
// a closure
return function () {
self.hasBeenClicked.set(true)
}
}
})
<template name="userDisplay">
<div>{{> React component=UserAvatar userId=_id onClick=onClick}}</div>
</template>
