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. Hibernate锁机制

    业务逻辑的实现过程中,往往需要保证数据访问的排他性.因此,我们就需要通过一些机制来保证这些数据在某个操作过程中不会被外界修改,这样的机制,在这里,也就是所谓的“锁”,即给我们选定的目标数据上锁,使其无 ...

  2. hashmap源码

    Java里各种基础容器的实现都是链表外加引用的形式.So,hashmap也不例外. 那小考虑下:hashmap是怎么产生的呢? 常用的两种数据结构数组和链表各有优劣,数组寻址容易,插入和删除困难:而链 ...

  3. PHP开源CRM-推荐几个

    http://www.xinyou88.com/about/xcrm.html 因为医院要同步用户到诊统计的信息.是拿着表单来回送.途中大概有20分钟左右.有些机器和互联网可以搞定的事情.人力来做.在 ...

  4. css初始化值

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,textarea,input,p,th,td,tr,table,tbody,thead,tfoot, ...

  5. bundle export fail

    C:\eclipse\eclipse.exe -vmargs -Dfile.encoding=utf8

  6. zf-中间库(xzfw_xzjc_jianshi)

    比如说 xzfw_xzjc_jianshi 就是 建始的 一个中间库 这个(zwfw)是有个触发器,将数据交换到中间库xzfw_xzjc_jianshi 这个中间库 老版本没有交换工具,将数据交换到监 ...

  7. 功能强大的HTML

    HTML基本标签(一) 1.什么是HTML html:Hyper TextMakeup language:超文本标记语言 html:网页的“源码” 浏览器:“解释和执行”html源码的工具 2.网页的 ...

  8. Struts+Spring+Hibernate的Web应用执行过程

    struts1和spring有两种整合的方法  一种是action和spring bean映射:一种是将action交给spring初始化 第一种方式:访问.do的URL->tomcat接收到r ...

  9. CentOS6.5 添加epel源

    0.安装yum优先级插件 yum install yum-priorities 1.epel简介: https://fedoraproject.org/wiki/EPEL/zh-cn rpm -Uvh ...

  10. mac地址静态捆绑，防止arp欺骗

    arp -s 192.168.1.101 00-21-CC-D3-D5-FF 缺点,每次关机就还原,所以一般创建批处理文件,开机启动. ping 192.168.1.100 -l 65500 多台肉鸡 ...