標籤：
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":"[email protected]"},{"name":"張國立2","sex":"男2","email":"[email protected]"}]View Code
Backbone+React使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
