使用react来增强backbone视图功能-CSDN博客

曾经用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);