Backbone+React使用

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"
}]
View Code

 

posted @ 2016-07-24 10:27  甜菜波波  阅读(883)  评论(0)  编辑  收藏  举报