在一篇《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。
其他
Github: https://github.com/phodal/backbone-react
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。