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. hdu1426 Sudoku Killer

    Sudoku Killer Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total ...

  2. Python科学计算学习一 NumPy 快速处理数据

    1 创建数组 (1) array(boject, dtype=None, copy=True, order=None, subok=False, ndmin=0) a = array([1, 2, 3 ...

  3. VBS脚本和HTML DOM自动操作网页

    VBS脚本和HTML DOM自动操作网页 2016-06-16 10:24 1068人阅读 评论(0) 收藏 举报  分类: Windows(42)  版权声明:本文为博主原创文章,未经博主允许不得转 ...

  4. realypay

    1.判断新老接口的方法: 去网站后台接口配置的地方,如果有merchantno参数就是新接口,否则为老接口,新接口则不需要更新了. 2.老接口需要去网站后台卸载老的接口,然后再用新的(下载的文件)覆盖 ...

  5. sqlserver2008用bat脚本备份时报错因为库名有中横杠【原创】

    提示原因是数据库名字有中横岗“-” 解决方法:用中括号把名字括起来就可以了 call :backupone [数据库名-new] 完整备份脚本如下 @ECHO ON set DATE=%date:/= ...

  6. activemq学习

    一.特性及优势 1.实现JMS1.1规范,支持J2EE1.4以上2.可运行于任何jvm和大部分web容器(ActiveMQ works great in any JVM)3.支持多种语言客户端(jav ...

  7. islands打炉石传说<DP>

    islands最近在完一款游戏"炉石传说",又名"魔兽英雄传".炉石传说是一款卡牌类对战的游戏.游戏是2人对战,总的来说,里面的卡牌分成2类,一类是法术牌,另一 ...

  8. Hadoop集群搭建的密钥配置SSH实现机制的配置（2）

    [hadoop@weekend110 ~]$ ssh-keygen -t rsa 用来生产密钥对 Generating public/private rsa key pair. Enter file ...

  9. .net core 14

  10. DataGridView如何实现列标头带数据筛选功能，就象Excel高级筛选功能一样

    '近日有本论坛网友问:DataGridView如何实现列标头带数据筛选功能,就象Excel高级筛选功能一样 '今晚正好闲着没事,加之以前也没用到过这个需求,所以就写了个模拟功能,供各位坛友酌情参考. ...