1.react View as Backbone
2.backone and react and communication, backbone view rendering react components, react components use backbone collection data
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8" /> <title></title> <Scriptsrc= "Http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></Script> <Scriptsrc= "Http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></Script> <Scriptsrc= "Http://static.runoob.com/assets/react/browser.min.js"></Script> <Scripttype= "Text/ecmascript"src= "App/scripts/vendor/jquery.min.js"></Script> <Scriptsrc= "App/scripts/vendor/underscore.js"></Script> <Scriptsrc= "App/scripts/vendor/backbone.js"></Script> </Head> <Body> <aclass= "Search">Click here to search</a><DivID= "Con"> <Scripttype= "Text/babel"> varHelloMessage=React.createclass ({render:function() { vararr=[]; 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 (////document.getElementById (' example ')// ); varModel=Backbone.Model.extend ({defaults:{name:'Moren', Sex:'nan', Email:'eml'} }); varCO=Backbone.Collection.extend ({model:model, url:'/data.aspx' }); varCo=NewCO (); varMyView=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(){ varHM=react.createfactory (HelloMessage); Reactdom.render (NewHM ({name:'xxxxx', Model:co}), This.$('. Widget-container'). Get (0)); //Reactdom.render (HM ({name: ' xxxxx '}), this.$ ('. Widget-container '). Get (0)); //Reactdom.render ( //Reactdom.render (}, Initialize:function(){ } }); NewMyView (). render (); </Script> </Div> </Body></HTML>
Data.aspx
<%@ Page Language="C #"AutoEventWireup="true"codebehind="Data.aspx.cs"Inherits="Testbackbone.data" %>[{"Name": "Zhang National", "Sex": "Male", "email": "[email protected]"},{"name": "Zhang National 2", "Sex": "Male 2", "email": "[email protected]"} ]View Code
Backbone+react use
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
