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"

}]

Backbone+React使用的更多相关文章

  1. yeoman的学习

    官网地址:http://yeoman.io/ 什么是yeoman? 在上一篇博客已粗劣地提到yeoman的安装和验证.说白了,其实yeoman是生成代码和搭建框架的前端自动化工具.为了做到这些,yeo ...

  2. 2017年 JavaScript 框架回顾 -- 前端框架

    概述: 对于 JavaScript 社区来说,npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架.npm 强大的搜索功能能够帮助找到一组相关的软件包,同时其内置的的 ...

  3. 【转】js面试题,明确自己的不足

    https://blog.csdn.net/m0_37631322/article/details/85409716 -------------------- 2018年12月30日 21:05:43 ...

  4. 知乎live - 三年从前端小工到架构

    王利华   刚毕业 在高德 携程 淘宝    0-3年如何发展 1 技能和能力的区别    css js 抽象     切勿好高骛远 要重视基础 2 人和人的差距是什么    注意个人品牌    提高 ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. Node.js建站笔记-使用react和react-router取代Backbone

    斟酌之后,决定在<嗨猫>项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现. react拥有丰富的组件,虽然不如Back ...

  7. React和Backbone优缺点

    1.React 使用了VDOM,方便移植至其他平台,如Android等:Backbone更灵活,且与Jquery结合比较好. 2.React如果不与Jsx结合易读性很差;Backbone有强大的模板功 ...

  8. Backbone视图渲染React组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

随机推荐

  1. Linux学习 -- Shell编程 -- 字符处理命令

    sort排序命令 sort [选项] 文件名 -f 忽略大小m写 -n 按数值型,默认字符串型 -r 反向 -t 指定分隔符 -k n[,m] 指定字段范围,默认行尾 eg. sort -n -t & ...

  2. Light OJ - 1058 Parallelogram Counting（判定平行四边形）

    Description There are n distinct points in the plane, given by their integer coordinates. Find the n ...

  3. Oracle Sql优化之Merge 改写优化Update

    1.待改写语句如下 update table1 f )),) ,),)), f.jine2 )),) from table2 e where e.kjqj=f.kjqj=e.gs=f.gs and e ...

  4. asp 自我定时删除

    <% if now()>"2008-9-15" thenset myfso=server.CreateObject("scripting.filesystem ...

  5. 使用for循环还是foreach循环？

    很多时候我们很自然的认为,for循环的时候使用foreach和原来的for循环用下标的方式遍历是相同的. 而且因为foreach循环写法简单,很容易理解,而且少去了很多麻烦的变量,所以估计在学会使用f ...

  6. Bcdedit命令使用详解使用方法

    XP,WIN2003,VISTA,万indows,WIN2008多盘多系统多引导bcdedit的使用windows出了新系统vista,2008想赏赏鲜学习学习~~但又习惯于用旧的XP,2003,然而 ...

  7. C++设计模式-单件

    理解 1.       Singleton模式用来取代全局静态变量.C++通过静态成员变量来实现类实例全局唯一性. 2.       instance()方法是单件提供的唯一调用入口.   要点 1. ...

  8. Android----drawable state各个属性详解----ListView几个比较特别的属性：

    android:drawable 放一个drawable资源android:state_pressed 是否按下,如一个按钮触摸或者点击.android:state_focused 是否取得焦点,比如 ...

  9. Tomcat Neither the JAVA_HOME nor the JRE_HOME environment variable is defined

    一眼就能看出来是jdk的环境有问题,但是用了这么久的jdk一直都配置的好好的,怎么一到Tomcat上就这么矫情了. 最后查解决方案,原来是我的jdk从官网直接下载的,虽然我修改了java_home,但 ...

  10. jsp的Get 与 SET的区别

    getParameter:获取前个页面的数据,此方法获取的数据是从前台提交过来的 getAttribute:是获取setAttribute存储的数据 ========================= ...