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. 7--OC中NSLog函数输出格式详解

    OC中NSLog函数输出格式详解 • %@ 对象 • %d, %i 整数 • %u 无符整形 • %f 浮点/双字 • %x, %X 二进制整数 • %o 八进制整数 • %zu size_t • % ...

  2. java.lang.IllegalArgumentException: Can't convert argument: null

    出现这样的异常:: 这是由于eclipse在修改项目名的时候,eclipse自动更新部署了web.xml文件 并且重新生成了xml文件的头部声明. 新增了java的命名把这个javaee去掉就可以了. ...

  3. android viewpager 深究

    参考: http://blog.csdn.net/xushuaic/article/details/42638311 GitHub上相关的ViewPager动画的项目 https://github.c ...

  4. Qt5：图片彩色键控，设置图片中指定颜色的像素为透明

    有图片 1.png 设置该图中的颜色为粉红色的像素为透明 QPixmap pix("1.png"); QBitmap mask= pix.createMaskFromColor(Q ...

  5. C++中运行外部程序

    关于三个SDK函数: WinExec, ShellExecute,CreateProcess 的其他注意事项: [1]定义头文件 必须定义以下两个头文件: #include <shlobj.h& ...

  6. redis 工具类 单个redis、JedisPool 及多个redis、shardedJedisPool与spring的集成配置

    http://www.cnblogs.com/edisonfeng/p/3571870.html http://javacrazyer.iteye.com/blog/1840161 http://ww ...

  7. 最短路径算法专题3----Bellman-Ford

    这个算法也是求单源最短路径用的,但是这个算法可以解决Dijkstra不能解决的负权边问题. 算法要点: 1.用dis存放源点到任意一点的距离. 2.用三个数组存放输入的点到点以及点到点的距离,x[i] ...

  8. Redis SAVE 命令 返回 ERR

    今天使用redis-cli客户端中执行SAVE命令返回 (error) ERR Baidu找不到答案,去Google找一下 应该是redis-server服务没有root权限 然后sudo kill ...

  9. Android, BaseAdapter 处理大数据量时的优化

    Android优化 最常见的就是ListView, Gallery, GridView, ViewPager 的大数据优化  图片优化  访问网络的优化优化的原则: 数据延迟加载  分批加载  本地缓 ...

  10. C#入门经典（第五章-1）