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. UVA 796 Critical Links (tarjan算法求割边)

    这是在kuangbin的题目里看到的,不得不吐槽一下,题目中居然没给出数据范围,还是我自己猜的-本来是一道挺裸的题,但是我wa了好多次,原因就是这里面有两个坑点,1重边特判,2输出时左边必须比右边小. ...

  2. 随机法解决TSP问题

    TSP问题一直是个头疼的问题,但是解决的方法数不胜数,很多的算法也都能解决.百度资料一大堆,但是我找到了代码比较简练的一种.随机法.下面只是个人的看法而已,如果有任何问题虚心接受. 顾名思义,随机法就 ...

  3. eclipse快捷键（转载）

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  4. Django: 之Web框架完美解析

    Web框架解析 Web通过Socket来监听客户端,,一旦发现客户发送的信息立刻接受.接受之后在服务端查找客户的请求,找到请求返回给用户,断开.这是一个连接,不断的接收,不断的返回. #!/usr/b ...

  5. filters

    http://www.cloudera.com/content/cloudera/en/documentation/core/latest/topics/admin_hbase_filtering.h ...

  6. 转 ORACLE数据库它可以存储 中文 字节或字符

    一:因为ORACLE数据库它可以存储字节或字符,例如 CHAR(12 BYTE) CHAR(12 CHAR)的意义是不同的.一般来说默认是存储字节,你可以查看数据库参数NLS_LENGTH_SEMAN ...

  7. POJ 3660 Cow Contest 弗洛伊德

    题意难懂是POJ的标配,这都TM赖本泽马. 题意:有N头牛进行了M场比赛,比赛双方是A - B 且总是A赢(前面的那个数赢),如果说A赢B,B赢C 则可以确定A赢C.问最终多少头牛的排名可以确定. 思 ...

  8. 转：检查点(web_reg_find函数详解)

    LR检查点 设置检查点的目的不只是为了验证我们的脚本没有错误,而更重要的是一个规范问题,如何使得测试结果更具有说服力,因此建议所有的测试脚本中都添加检查点设置 一.设置检查点的方法 1.将脚本切换到树 ...

  9. CentOS 7 安装 GlusterFS

    CentOS 7 GlusterFS 环境说明: 3台机器安装 GlusterFS 组成一个集群. 使用 docker volume plugin GlusterFS 服务器: 10.6.0.140 ...

  10. oracle 日期相减

    oracle日期相减2012-02-10 12:18--MONTHS_BETWEEN(date2,date1) 给出date2-date1的月份 SQL> select months_betwe ...