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 @   甜菜波波  阅读(885)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示