使用react来增强backbone视图功能

曾经用backbone做了几个项目,对它里面的视图功能真是不敢恭维,基本上用它作为前端mvc框架的都是为了兼容性,不过随着M$xp的放弃,以及win7未来的不支持,IE8已经成了不少公司兼容IE的底限了,所以这时候假如还用Backbone的话,确实有点对不起住自己,不过有些时候不是你想用什么就用什么的,所以这时候你就要想办法去提高backbone视图功能,这时候该是react出马的时候了,

React概览

react首先它是一个ui框架,用来创建独立的前端UI组件用的,类似于angularjs里的指令以及polymer里的web组件,为什么说它能够提高backbone视图功能,答案就在于它的独立性以及数据同步功能,类似于ng里的数据双向绑定,react基于state也提供了类似的数据跟视图的同步功能.

react提供了一个叫做JSX语法的UI输写规范,相当于在js里直接写html,而且不用包装成字符串,相当于js模板语言的结合体,所以这个在运行的时候是需要转换成真实可调用的js的,先看个例子

  • 带JSX语法的代码

/** @jsx React.DOM */
var component = React.createClass({
  render: function() {
    return <a href="http://venmo.com">Venmo</a>
  }
});
  • 转换后的代码

/** @jsx React.DOM */
var component = React.createClass({
  render: function() {
    return React.DOM.a( {href:"http://venmo.com"}, "Venmo")
  }
});

而且在前端构建里去整合这些转换工具也是非常方便的,目前已经有下面的npm模块:

  • require-jsx,这是一个RequireJS插件用来加载.jsx后缀文件的.
  • reactify,这是一个用在Browserify构建时候的jsx转换模块.
  • grunt-react,这是一个用在grunt构建时的一个grunt插件.

不过JSX语法是可选的,本身提供了React.DOM对象来支持各种html元素的构建,对react不熟悉的话,可以看这个教程

渲染React组件到Backbone视图中

我们先创建一个简单的组件,功能就是单击里面的链接然后去触发定义的一个方法,代码如下:

var MyWidget = React.createClass({
  handleClick: function() {
    alert('Hello!');
  },
  render: function() {
    return (
      <a href="#" onClick={this.handleClick}>Do something!</a>
    );
  }
});

然后我们添加一个backbone视图来渲染它.

var MyView = Backbone.View.extend({
  el: 'body',
  template: '<div class="widget-container"></div>',
  render: function() {
    this.$el.html(this.template);
    React.renderComponent(new MyWidget(), this.$('.widget-container').get(0));
    return this;
  }
});

new MyView().render();

下面是jsfiddle上面运行的例子,可以点击里面的链接看看效果.

React组件与Backbone通信

上面的例子只是单方面的调用,这里说下双方的交互,这才是实际项目中出现的场景.下面演示一个,在react组件里单击,然后在backbone视图里增加一个元素。

先定义一个react组件

var MyWidget = React.createClass({
  render: function() {
    return (
      <a href="#" onClick={this.props.handleClick}>Do something!</a>
    );
  }
});

注意这里的this.props是用来获取元素实例里的属性用的,然后我们来定义一个backbone视图

var MyView = Backbone.View.extend({
  el: 'body',
  template: '<div class="widget-container"></div>' +
            '<div class="outside-container"></div>',
  render: function() {
    this.$el.html(this.template);

    React.renderComponent(new MyWidget({
      handleClick: this.clickHandler.bind(this)
    }), this.$('.widget-container').get(0));

    return this;
  },
  clickHandler: function() {
    this.$(".outside-container").html("The link was clicked!");
  }
});

在上面的代码里通过new一个react组件,然后传递一个事件参数,利用bind方法把事件指向了视图实例中去,从而实现交互

来看看在jsfiddle上面的效果

通过上面的bind方法实现了react组件与backbone视图的交互,下面来看看backbone是怎么跟react交互的

Backbone与React组件通信

上面已经了解react组件与backbone视图的通信,这里讲下怎么利用backbone中的model与组件的通信,当model改变的时候怎么同步修改组件呢,下面我先定义一个简单的model

var ExampleModel = Backbone.Model.extend({
  defaults: {
    name: 'Backbone.View'
  }
});

然后我们定义两个视图,这里直接使用react组件来代替backbone里的视图,一个视图用来触发修改model,一个同步显示修改的model

// 这个视图用来同步显示修改的model属性
var DisplayView = React.createClass({
  componentDidMount: function() {
    this.props.model.on('change', function() {
      this.forceUpdate();
    }.bind(this));
  },

  render: function() {
    return (
      <p>
        {this.props.model.get('name')}
      </p>
    );
  }
});

下面的视图组件是用来触发model的修改

var ToggleView = React.createClass({
  handleClick: function() {
    this.props.model.set('name', 'React');
  },
  render: function() {
    return (
      <button onClick={this.handleClick}>
        model.set('name', 'React');
      </button>
    );
  }
});

最后我们来渲染这两组件,并传递model为这两件组件的属性

var model = new ExampleModel();

React.renderComponent((
  <div>
    <DisplayView model={model} />
    <ToggleView model={model} />
  </div>
), document.body);

注意下这里的this.forceUpdate方法,它是保证重新render组件用的,componentDidMount方法是组件初始化的时候会执行,这里负责绑定监听model改变事件的地方.

下面是在jsfiddle上面运行的效果,可以点击看看

总结

BackboneReact是一对极好的搭档,下面是一些其它关于这方面的blog,有兴趣的可以看看.

React官方也提供了一个与Backbone结合的Todo例子,an example Backbone+React TodoMVC app

虽然React阵营不是很成熟,但是它是一个令人兴奋的库,而且还可以投入生产环境,非常适合用来构建重用的组件,与Backbone的结合更是能够增强视图方面的业务能力.

时间: 2016-05-27
Tags: javascript

使用react来增强backbone视图功能的相关文章

使用ISAPI过滤器增强IIS的功能

作为一个WWW服务器软件,微软公司的Internet Infomation Server(IIS)简单易学,管理方便,得到了广泛的使用.您还可以通过ISAPI过滤器,进行自己定制的处理,来增强IIS的功能.ISAPI过滤器可以定制以下的处理:接收HTTP协议头预处理.发送HTTP协议头预处理.发送生数据预处理.获得生数据预处理.HTTP会话结束信息处理.自定义的安全认证机制.URL映射信息处理.日志记录处理等.灵活利用这些定制处理,您可以完成许多看似难以实现的功能,得到意想不到的效果.但是ISA

用于增强HTML页面功能的超文本标记

近年来,超文本标识语言(HTML)得到了迅速拓展.为满足更多的需要,它增加了许多扩展功能.设计新颖.吸引人的网页已经越来越依赖java applet(小程序).内嵌脚本.图文框.插件和其它扩展的HTML功能.这些扩展的HTML功能不仅可以对文本作进一步的格式化,而且可以嵌入程序.动画和其它交互式操作元素,将曾经是静态的主页转换成一幅新的美妙绝伦的画面,它可以任主页制作者充分发挥自己的想像力,设计出充满魅力的主页来.下面我就介绍几个用于增强HTML页面功能的超文本标记,这些标记正越来越多地用于网页

Excel表格中视图功能相关详解

  Excel表格中视图功能相关详解          一.同时查看两个excel文件 打开两个excel文件 视图 - 全部重排 - 垂直/水平并排 二.同时查看同一个excel文件的两个excel工作表 视图 - 新建窗口 - 全部重排 - 垂直/水平并排 三.同时查看同一个表的两个不同区域 1.第一行不动(向下翻看excel表时,让一个表格的第一行固定不动) 视图 - 冻结窗格 - 冻结首行 2.同时查看两个动态区域 选取某一行 - 视图 - 拆分,可以把界面拆分成上下两部分,和冻结不同的

简介AngularJS的视图功能应用

  这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用,以及 $routeProvider 需要的朋友可以参考下 AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图)

Windows 8.1灵活丰富的分屏视图功能

  现在,Win8.1预览版提供了更为丰富灵活的"分屏视图(Snap Views)"功能,不仅支持低分辨率屏幕,而且分屏数量最多可达四个;系统即提供智能分屏调整,同时也支持手动调整分屏之间的面积比例,满足不同的应用需要. Win 8.1"分屏视图(Snap Views)"功能支持智能调整 Win 8.1的"分屏视图(Snap Views)"功能支持智能调整.如果我们在邮件应用中打开照片,Win8.1预览版会认为照片浏览需要更大的空间,直接将邮件应

如何用 React 完成图片上传功能?

本文讲的是如何用 React 完成图片上传功能?, 下面这篇特邀文章是由 Damon Bauer 完成的,主题是关于一个 web 开发人员非常常见的工作:为用户提供图片上传功能.我想说这并不容易,但是有了一些功能强大的工具来帮忙做一些比较"重"的工作,这个任务会觉得比以前轻松许多.Damon 甚至全程在浏览器中完成了这项任务! 对于 web 开发者来说,让用户能够上传图片是一件很常见的事情.一开始可能看起来小菜一碟,但是当真正创建一个图片上传组件的时候,还是有些问题需要去考虑的.这里有

Wind2008 R2中PowerShell 2.0的ISE及增强的远程功能

http://www.aliyun.com/zixun/aggregation/32995.html">在Windows Serve 2008 R2中,一个重要改进就是PowerShell版本升级为2.0.Win 2008 R2包括一系列新的服务器管理界面,这些均建立在PowerShell 2.0之上.它新增了240个cmdlets命令集,新的PowerShell图形用户界面也增添了开发功能,从而用户能更简单创建自己的命令行.而且,PowerShell将能够安装到Windows服务器内核.

阿尔卡特朗讯企业通信面向中小企业推增强版通信功能

法国巴黎,2016年2月18日 - 当今的中小型企业希望借助先进的通信技术来促进业务增长,通过使用智能化办公来提升客户的满意度.阿尔卡特朗讯OpenTouch中小企业版套件的增强版通信功能,可以使业务合作伙伴能为中小型企业提供最简洁的通信工具,从而打造个性化的互联体验. 作为最新推出的合作伙伴价值计划(V4P)的一部分,ALE以阿尔卡特朗讯企业通信为品牌,携手业务合作伙伴一起探索如何更好地为中小型企业服务.OpenTouch中小企业版套件以阿尔卡特朗讯OmniPCX Office RCE R10

三星S7 SM-G9300(6.0.1)如何使用多窗口/分屏视图功能?

长按最近键即可打开多窗口/分屏视图功能,具体使用方法,请按以下步骤操作:  1.长按[最近]键.    2.选择一个需要以多窗口分屏视图打开的应用程序,这里以点击[S 日历]为例.    3.S 日历已在屏幕上半部分显示,选择另一个应用程序,这里以点击[信息]为例.    4.信息已在屏幕下半部分显示,点击两个程序中间的[圆点]图标.    5.显示的功能从左到右依次为切换窗口.拖放内容.最小化窗口.最大化窗口.关闭应用程序.点击[切换窗口]图标.    6.信息和S 日历窗口位置已切换,点击[