在一篇《Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖》,我们介绍了如何使用Requirejs管理我们的JS,这一篇让我们来看看如何使用model。
react.backbone
react.backbone简介
项目首页: https://github.com/clayallsopp/react.backbone
Plugin for React to make Backbone integration easier. Initialize your component with a Backbone.Model or Backbone.Collection; when the model or collection changes, #render will be called.
安装
bower install react.backbone --save-dev
README上有这样一个例子:
var UserViewComponent = React.createBackboneClass({
changeOptions: "change:name", // DEFAULT is "change",
render: function() {
return (
<div>
<h1>{this.getModel().get("name")}</h1>
</div>
);
}
});
var user = new Backbone.Model();
var UserView = React.createFactory(UserViewComponent);
var userView = UserView({model: user});
可惜太长了。让我们来作一个简单的例子:
React使用Backbone Model
记得在上一篇中,我们提到了router,在Router里的project是这样子的:
project: function(){
var user = new UserModel({name: 'phodal'});
var UserView = React.createFactory(ProjectComponent);
var userView = new UserView({model: user});
React.render(userView, document.getElementById('main_content'));
},
而UserModel则是一个简单的model
define(['backbone'], function(Backbone) {
var UserModel = Backbone.Model.extend({
initialize : function(name) {
this.name = name;
},
defaults:{
name:null
}
});
return UserModel;
});
我们用到了一个叫ProjectComponent的component,最后将它渲染到main_content这个id上。
我们的projectcomponent是这样子的:
define([
'react',
'react.backbone'
],function(React){
return React.createBackboneClass({
render: function () {
return (
<div>
<h1>{this.getModel().get('name')}</h1>
Project
</div>);
}
});
});
从我们的model里面获取“name`。
这样,我们就可以简单地在我们的应用中使用Backbone Model。