backbone.js
これまで、ほとんどのフロントエンド JavaScript プロジェクトで JavaScriptを使用してきましたが、Facebook のことを聞いてreact.js
興味を持ち、色々調べ始めました。
クラスをもう使用するか、すべての「ビュー」を反応する「コンポーネント」に置き換えるかどうかBackbone.View
、ページをレイアウトしている「ベースビュー」でさえも...
まだ s を使用しているインターウェブでいくつかの投稿を見つけましたが、Backbone.View
作成された React クラスのみを見つけたものもあります。
- http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html
- https://usepropeller.com/blog/posts/from-backbone-to-react/
- http://blog.mayflower.de/3937-Backbone-React.html
- https://medium.com/react-tutorials
多分誰かが私を正しい方向に向けることができます...いつ、どのように単一ページアプリで複数の「ページ/状態」を最適に実装するために何を使用するか、通常の(もう我慢できます)TODOの例だけではありません。
ここで私が思いついたいくつかのコード:
バックボーンの初期設定:
require(
[
"jsx!app/view/base",
"react",
"app/router",
"backbone"
],
function (BaseView, React, Router, Backbone) {
"use strict";
var router = new Router();
var base = new BaseView({router: router});
React.renderComponent(base, document.getElementById("page"));
router.on("route", function(action) {
base.setProps({path: action});
});
Backbone.history.start({pushState: true});
}
);
app/router
:
define(function(require) {
"use strict";
var Backbone = require("backbone");
/**
*
*/
var Router = Backbone.Router.extend({
routes: {
"": "home",
"test": "test",
"*error": "404"
}
}); // end Router
return Router;
});
app/view/base.jsx
:
define(function(require) {
"use strict";
var React = require("react");
var mixins = require("app/utils/mixins");
var Header = require("jsx!app/view/header");
var ContentHome = require("jsx!app/view/content_home");
var ContentTest = require("jsx!app/view/content_test");
var ContentLogin = require("jsx!app/view/content_login");
/**
*
*/
var BaseView = React.createClass({
render: function() {
var content;
switch (this.props.path) {
case "home":
content = <ContentHome />
break;
case "test":
content = <ContentTest />
break;
case "login":
content = <ContentLogin />
break;
case "404":
default:
content = "Error, page not found";
break;
}
return (
<div id="base" onClick={this.onClick}>
<Header />
{content}
</div>
);
},
onClick: function(event) {
if (event.target.tagName.toLowerCase() === "a" &&
event.target.className === "main") {
event.preventDefault();
this.props.router.navigate(event.target.pathname, {trigger: true});
}
}
}); // end BaseView
return BaseView;
});
しかし、私はこの設定に完全に満足しているわけではありません。任意の入力を歓迎します。