在一篇《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。