1.react作为backbone的视图
2.backone和react和通信，backbone的view 渲染react组件， react组件使用backbone的collection数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> <script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script> <script src="app/scripts/vendor/underscore.js"></script> <script src="app/scripts/vendor/backbone.js"></script> </head> <body > <a class="search">点此search</a> <div id="con"> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { var arr=[]; this.props.model.each(function(it){ arr.push('<p>'+it.get('name')+Math.random(0,100000)+'</p>') }); return <div><h1>Hello World！{this.props.name}</h1> <h5> { arr } </h5> </div>; } }); // ReactDOM.render( // <HelloMessage />, // document.getElementById('example') // ); var Model=Backbone.Model.extend({ defaults:{name:'moren',sex:'nan',email:'eml'} }); var CO=Backbone.Collection.extend({ model:Model, url:'/data.aspx' }); var co=new CO(); var MyView = Backbone.View.extend({ el: 'body', events:{'click .search':'searchobj'}, template: '</br><div class="widget-container"></div>', render: function() { this.$el.append(this.template); var that=this; co.fetch({success:function(){ that.search(); } }); return this; }, searchobj:function(){ var that=this; co.fetch({success:function(){ that.search(); } }) }, search:function(){ var HM=React.createFactory(HelloMessage); ReactDOM.render(new HM({name:'xxxxx',model:co}), this.$('.widget-container').get(0)); // ReactDOM.render( HM({name:'xxxxx'}), this.$('.widget-container').get(0)); // ReactDOM.render(<HM name='xiaoxiao' mod={co}/>), this.$('.widget-container').get(0)); // ReactDOM.render(<HelloMessage name='xiaoxiao' />), this.$('.widget-container').get(0)); }, initialize:function(){ } }); new MyView().render(); </script> </div> </body> </html>
data.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="data.aspx.cs" Inherits="TestBackBone.data" %> [{ "name":"张国立", "sex":"男", "email":"zhangguoli@123.com" }, { "name":"张国立2", "sex":"男2", "email":"zhangguoli2@123.com" }]