Backbone模型整合React(React + Backbone Model)

模型非常有效的组织接口数据。Backbone的模型，特别是在通过绑定各种事件当数据发生变化时重新渲染界面。

使用Backbone

我们已经介绍了如何引入Backbone依赖，但还是熟悉一下如何使用模型把，通常是这样的：

<!doctype html>
<html lang="en">
  <head>
    <script src="jquery-2.0.3/build/jquery.js"></script>
    <script src="underscore-1.5.2/build/underscore.js"></script>
    <script src="backbone-1.1.0/build/backbone.js"></script>
  </head>
  <body>
    <script type="text/javascript"> var Profile = Backbone.Model.extend({ defaults : { name : null,gender : null,picture : null } }); var profile = new Profile({ name : "Christopher Pitt",gender : "male",picture : "http://placekitten.com/200/200" }); console.log( "name : " + profile.get("name") + "\n" + "gender : " + profile.get("gender") + "\n" + "picture : " + profile.get("picture") ); </script>
  </body>
</html>

这个例子so easy。我们通过继承Backbone.Model，给模型定义一些默认值。然后我们通过提供键值对实例化模型。
取值可以使用get()这个方法。我们使用这个方法的原因是不能直接访问（不是直接访问这个值）。JS目前是没有get/set方法的，可以使用Backbone来实现这两个方法，使用这个方法我们就可以监听change事件并根据我们的需要调整界面。

渲染模型

让我们创建一个叫Profile的模型

<!doctype html>
<html lang="en">
  <head>
    <script src="jquery-2.0.3/build/jquery.js"></script>
    <script src="underscore-1.5.2/build/underscore.js"></script>
    <script src="backbone-1.1.0/build/backbone.js"></script>
    <script src="react-0.8.0/build/react.js"></script>
    <script src="react-0.8.0/build/JSXTransformer.js"></script>
    <style> body { padding : 20px; font-family : helvetica,arial; } .picture { margin : 0 0 10px 0; } </style>
  </head>
  <body>
    <script type="text/jsx"> /** * @jsx React.DOM */ var Profile = Backbone.Model.extend({ defaults : { name : null,picture : "http://placekitten.com/200/200" }); var CardComponent = React.createClass({ render : function@H_811_301@() { return ( <div className="card"> <div className="picture"> <img src={this.props.profile.get("picture")} /> </div> <div className="name"> {this.props.profile.get("name")} <small> ({this.props.profile.get("gender")}) </small> </div> </div> ); } }); React.renderComponent( <CardComponent profile={profile} />,document.body ); </script>
  </body>
</html>

在这个例子里，我们将实例化的profile模型传递给CardComponent组件。然后在render方法中我们使用getter填充组件。

填充模型

这个例子中使用的是静态数据，但如果我们想用动态真是的数据该怎么办呢？让我们连接Facebook并配置我们的数据把！
访问https://developers.facebook.com并选择Apps->Create a New App。取个名字，一个命名空间和一个分类并点击Create App。

记录好App ID，当我们在示例应用中需要整合Facebook需要它。我们需要添加localhost到允许域名中。做好这些，我们点击Add Platform并选择Website，输入http://localhost/这是站点URL并添加localhost到App Domains字段中，点击Save按钮就可以继续了！

让我们看看如何将Facebook SDK嵌入到代码中，像下面一样：

<div id="fb-root"></div>
<script> window.fbAsyncInit = function@H_811_301@() { FB.init({ appId : '{your-app-id}',status : true,xfbml : true }); }; (function@H_811_301@(d,s,id){ var js,fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js,fjs); }(document,'script','facebook-jssdk')); </script>

确保将{your-app-id}替换成你创建Fackbone app时的App ID，否则JS就会报错。

由于我们在Fackbone中添加了localhost，我们接下来需要在本地添加一个Web服务器来运行代码，运行下面命令：

python -m SimpleHTTPServer

这将启动一个Web服务器，你可以在浏览器中输入http://localhost:8000 来访问。
最后，让我们来看看加了Facebook的用了React的Backbone模型怎么样：

<!doctype html>
<html lang="en">
  <head>
    <script src="jquery-2.0.3/build/jquery.js"></script>
    <script src="underscore-1.5.2/build/underscore.js"></script>
    <script src="backbone-1.1.0/build/backbone.js"></script>
    <script src="react-0.8.0/build/react.js"></script>
    <script src="react-0.8.0/build/JSXTransformer.js"></script>
    <style>

      body {
        padding     : 20px;
        font-family : helvetica,arial;
      }

      .picture {
        margin : 10px 0;
      }

    </style>
  </head>
  <body>
    <button class="connect">Connect</button> <div class="target"></div> <div id="fb-root"></div> <script type="text/jsx"> /** * @jsx React.DOM */ var Profile = Backbone.Model.extend({
        defaults : {
          name    : null,gender  : null,picture : null
        }
      });

      var CardComponent = React.createClass({
        componentWillMount : function@H_811_301@() {
          profile.on("change",(function@H_811_301@() {
            this.forceUpdate();
          }.bind(this)));
        },componentWillUnmount : function@H_811_301@() {
          profile.off("change");
        },render : function@H_811_301@() {
          return (
            <div className="card">
              <div className="picture">
                <img src={this.props.profile.get("picture")} />
              </div>
              <div className="name">
                {this.props.profile.get("name")}
                <small>
                  ({this.props.profile.get("gender")})
                </small>
              </div>
            </div>
          );
        }
      });

      var connect = document.querySelector(".connect");
      var target  = document.querySelector(".target");
      var profile = new Profile();

      var fetchProfile = function@H_811_301@() {
        React.renderComponent(
          <CardComponent profile={profile} />,target
        );

        FB.api("/me","get",{},function@H_811_301@(result) {
          profile.set("name",result.name);
          profile.set("gender",result.gender);
        });

        var params = "?redirect=false&width=200&height=200";

        FB.api(
          "/me/picture" + params,function@H_811_301@(result) {
            profile.set("picture",result.data.url);
          }
        );
      };

      var login = function@H_811_301@() {
        FB.login(function@H_811_301@() {
          fetchProfile();
        });
      };

      window.fbAsyncInit = function@H_811_301@() {

        FB.init({
          appId  : "579585842125092",xfbml  : true
        });

        connect.addEventListener("click",function@H_811_301@() {
          login();
        });

        FB.Event.subscribe(
          "auth.authResponseChange",function@H_811_301@(response) {
            if (response.status === "connected") {
              fetchProfile();
            }
          }
        );

      };

      (function@H_811_301@(d,id){
        var js,fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js,fjs);
      }(document,"script","facebook-jssdk"));

    </script>
  </body>
</html>

让我们看看里面怎么回事：

我们像Quickstart引导的一样载入Facebook JS SDK。添加fb-root元素，window.fbAsyncInit这个方法初始化程序。
在执行FB.init()这个方法，我们添加了两种事件：绑定点击事件在.connect按钮上和authResponseChange事件在FB对象上。如果用户没有验证时点击按钮进入登陆流程。当他们验证通过authResponseChange时间将触发并执行fetchProfile这个方法。
fetchProfile这个方法将CardComponent组件渲染在.target元素上。这个时候一个空的Card被渲染，立即触发两个渲染方法：遍历会员信息资料和会员照片。这些反应是由于model的字段变化触发了forceUpdate(）这个方法。

结论

我们已经成功整合Backbone模型、React和Facebook SDK了。模型让我们非常有效的管理数据，反过来更新我们的React组件，这在集合中一样有效…

翻译自：https://medium.com/react-tutorials/react-backbone-model-8aaec65a546c#.ywf9zhqk6

Backbone模型整合React(React + Backbone Model)

使用Backbone

渲染模型

填充模型

结论

猜你在找的React相关文章