59 | (function (root, factory) {
38 |
44 |
45 |
47 |
48 | )
49 | }
50 | });
51 |
52 | let Hello = React.createClass({
53 | mixins: [BackboneReactMixin, State],
54 | render(){
55 | // debugger;
56 | return (
57 | Route is rendered here:
46 |hello {this.state.model.name}
58 | );
59 | }
60 | });
61 |
62 | let routes = (
63 | {paragraph.content}
; 9 | }, 10 | render: function () { 11 | return ( 12 |
13 |
16 | );
17 | }
18 | });
19 |
20 | var createParagraph = function () {
21 | return new Backbone.Model({content: ''});
22 | };
23 |
24 | var paragraph = createParagraph();
25 | var collection = new Backbone.Collection([paragraph]);
26 |
27 | var typewriter = {this.props.title}
14 | {this.props.collection ? this.props.collection.map(this.createParagraph) : void 0} 15 |
14 |
27 | );
28 | }
29 | });
30 |
31 | let PersonList = React.createClass({
32 | mixins: [BackboneReactMixin],
33 | overrideCollection() {
34 | // supply `this.props.collection` programmatically
35 | return PeopleStore;
36 | },
37 | renderPersonList() {
38 | return this.props.collection.map((person, index) => {
39 | return (
40 | A simple person list
15 |-
16 |
- 17 | Home 18 | 19 |
- 20 | List people 21 | 22 |
24 |
26 |
50 |
54 | );
55 | }
56 | });
57 |
58 | let PersonDetail = React.createClass({
59 | mixins: [State, Navigation, BackboneReactMixin],
60 | // supply a model programmatically, since we don't know beforehand which model we need to bind
61 | // we could perform an Ajax request here to get the model from the server
62 | overrideModel() {
63 | let modelId = this.getParams().id;
64 | return PeopleStore.get(modelId);
65 | },
66 | render() {
67 | return (
68 | -
51 | {this.renderPersonList()}
52 |
69 | this.goBack()}>Back
70 |
71 |
76 | )
77 | }
78 | });
79 |
80 | // _Declare_ routes and what views they should render
81 | let routes = (
82 |
72 |
75 | Details for {this.props.model.get('name')}
73 |{this.props.model.get('description')}
74 |
47 | Collection
48 |
49 |
53 | );
54 | },
55 | addToCollection: function (event) {
56 | this.getCollection().add({
57 | foo: _.uniqueId('new'),
58 | collection: new Collection()
59 | });
60 | }
61 | });
62 | // Component that represents a `Model`.
63 | var ModelComponent = React.createClass({
64 | mixins: [Backbone.React.Component.mixin],
65 | createCollection: function () {
66 | if (this.props.collection) {
67 | return -
50 | {this.getCollection().map(this.createModel)}
51 |
73 | {this.props.foo}
74 |
75 |
79 | );
80 | },
81 | removeModel: function (event) {
82 | this.getModel().destroy();
83 | }
84 | });
85 | // Render a `CollectionComponent` with the `collection` into `document.body`
86 | React.render(-
76 |
- {this.createCollection()} 77 |
39 |
44 | );
45 | },
46 | // Whenever an input changes, set it into this.state
47 | handleChange: function (event) {
48 | var target = event.target;
49 | var key = target.getAttribute('name');
50 | var nextState = {};
51 | nextState[key] = target.value;
52 | this.setState(nextState);
53 | },
54 | // Getting the id of the post that triggered the edit button and passing the
55 | // respective model into this.state.
56 | handleEdit: function (event) {
57 | var id = event.target.parentNode.getAttribute('data-id');
58 | // By getting collection through this.state you get an hash of the collection
59 | this.setState(_.findWhere(this.state.collection, {id: id}));
60 | },
61 | // Getting the id of the post that triggered the remove button and destroying
62 | // it (local and server).
63 | handleRemove: function (event) {
64 | var id = event.target.parentNode.getAttribute('data-id');
65 | // This is how you get the real Backbone.Collection instance
66 | var collection = this.getCollection();
67 | collection.get(id).destroy({wait: true});
68 | },
69 | // Save the new or existing post to the services
70 | handleSubmit: function (event) {
71 | event.preventDefault();
72 | var collection = this.getCollection();
73 | var id = this.state.id;
74 | var model;
75 | if (id) {
76 | // Update existing model
77 | model = collection.get(id);
78 | model.save(this.state, {wait: true});
79 | } else {
80 | // Create a new one
81 | collection.create(this.state, {wait: true});
82 | }
83 | // Set initial state
84 | this.replaceState(this.getInitialState());
85 | },
86 | // Go go react
87 | render: function () {
88 | return (
89 | {post.title}
40 | 41 | 42 |{post.content}
43 |
90 | {this.state.collection && this.state.collection.map(this.createPost)}
91 | {this.createForm()}
92 |
93 | );
94 | }
95 | });
96 |
97 | return BlogComponent;
98 | }));
99 |
--------------------------------------------------------------------------------
/examples/blog/public/components/blog.js:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 | (function (root, factory) {
3 | if (typeof module !== 'undefined') {
4 | var _ = require('underscore');
5 | var Backbone = require('backbone');
6 | var React = require('react');
7 | module.exports = factory(_, Backbone, React, require('backbone-react-component'));
8 | } else
9 | root.BlogComponent = factory(this._, this.Backbone, this.React, this.Backbone.React.Component.mixin);
10 | }(this, function (_, Backbone, React, backboneMixin) {
11 | 'use strict';
12 | // In a better implementation this would be splited into multiple components.
13 | // Keeping this under one component for the sake of the example. Remember composition :)
14 | var BlogComponent = React.createClass({
15 | mixins: [backboneMixin],
16 | getInitialState: function () {
17 | return {
18 | id: null,
19 | title: '',
20 | content: ''
21 | };
22 | },
23 | // Form rendering
24 | createForm: function () {
25 | return (
26 | React.DOM.form( {onSubmit:this.handleSubmit},
27 | React.DOM.h2(null, this.state.id ? 'Edit Post' : 'Create Post'),
28 | React.DOM.input( {name:"id", type:"hidden", value:this.state.id} ),
29 | React.DOM.input( {name:"title", type:"text", value:this.state.title, onChange:this.handleChange} ),
30 | React.DOM.textarea( {name:"content", value:this.state.content, onChange:this.handleChange} ),
31 | React.DOM.input( {type:"submit", value:this.state.id ? 'Update' : 'Insert'} )
32 | )
33 | );
34 | },
35 | // Post rendering
36 | createPost: function (post) {
37 | return (
38 | React.DOM.div( {key:post.id, 'data-id':post.id},
39 | React.DOM.h2(null, post.title),
40 | React.DOM.input( {type:"button", value:"Edit", onClick:this.handleEdit} ),
41 | React.DOM.input( {type:"button", value:"Remove", onClick:this.handleRemove} ),
42 | React.DOM.p(null, post.content)
43 | )
44 | );
45 | },
46 | // Whenever an input changes, set it into this.state
47 | handleChange: function (event) {
48 | var target = event.target;
49 | var key = target.getAttribute('name');
50 | var nextState = {};
51 | nextState[key] = target.value;
52 | this.setState(nextState);
53 | },
54 | // Getting the id of the post that triggered the edit button and passing the
55 | // respective model into this.state.
56 | handleEdit: function (event) {
57 | var id = event.target.parentNode.getAttribute('data-id');
58 | // By getting collection through this.state you get an hash of the collection
59 | this.setState(_.findWhere(this.state.collection, {id: id}));
60 | },
61 | // Getting the id of the post that triggered the remove button and destroying
62 | // it (local and server).
63 | handleRemove: function (event) {
64 | var id = event.target.parentNode.getAttribute('data-id');
65 | // This is how you get the real Backbone.Collection instance
66 | var collection = this.getCollection();
67 | collection.get(id).destroy({wait: true});
68 | },
69 | // Save the new or existing post to the services
70 | handleSubmit: function (event) {
71 | event.preventDefault();
72 | var collection = this.getCollection();
73 | var id = this.state.id;
74 | var model;
75 | if (id) {
76 | // Update existing model
77 | model = collection.get(id);
78 | model.save(this.state, {wait: true});
79 | } else {
80 | // Create a new one
81 | collection.create(this.state, {wait: true});
82 | }
83 | // Set initial state
84 | this.replaceState(this.getInitialState());
85 | },
86 | // Go go react
87 | render: function () {
88 | return (
89 | React.DOM.div(null,
90 | this.state.collection && this.state.collection.map(this.createPost),
91 | this.createForm()
92 | )
93 | );
94 | }
95 | });
96 |
97 | return BlogComponent;
98 | }));
99 |
--------------------------------------------------------------------------------
/dist/backbone-react-component-min.js:
--------------------------------------------------------------------------------
1 | !function(a,b){"function"==typeof define&&define.amd?define(["react","react-dom","backbone","underscore"],b):"undefined"!=typeof module&&module.exports?module.exports=b(require("react"),require("react-dom"),require("backbone"),require("underscore")):b(a.React,a.ReactDOM,a.Backbone,a._)}(this,function(a,b,c,d){"use strict";function e(a,b,c){this.state={},this.component=a;var d,e,f=c||a.props||{};d=a.overrideModel&&"function"==typeof a.overrideModel?a.overrideModel():f.model,e=a.overrideCollection&&"function"==typeof a.overrideCollection?a.overrideCollection():f.collection,this.setModels(d,b),this.setCollections(e,b)}c.React||(c.React={}),c.React.Component||(c.React.Component={});var f=c.React.Component.mixin={childContextTypes:{hasParentBackboneMixin:a.PropTypes.bool.isRequired,parentModel:a.PropTypes.any,parentCollection:a.PropTypes.any},contextTypes:{hasParentBackboneMixin:a.PropTypes.bool,parentModel:a.PropTypes.any,parentCollection:a.PropTypes.any},getChildContext:function(){return{hasParentBackboneMixin:!0,parentModel:this.getModel(),parentCollection:this.getCollection()}},componentDidMount:function(){this.setElement(b.findDOMNode(this))},componentDidUpdate:function(){this.setElement(b.findDOMNode(this))},getInitialState:function(){var a={};return this.wrapper||(this.wrapper=new e(this,a)),a},componentWillMount:function(){this.wrapper||(this.wrapper=new e(this))},componentWillUnmount:function(){this.wrapper&&(this.wrapper.stopListening(),delete this.wrapper)},componentWillReceiveProps:function(a){var b=a.model,c=a.collection;this.wrapper.model&&b?this.wrapper.model!==b&&(this.wrapper.stopListening(),this.wrapper=new e(this,void 0,a)):b&&(this.wrapper=new e(this,void 0,a)),this.wrapper.collection&&c?this.wrapper.collection!==c&&(this.wrapper.stopListening(),this.wrapper=new e(this,void 0,a)):c&&(this.wrapper=new e(this,void 0,a))},$:function(){var a;if(this.$el)a=this.$el.find.apply(this.$el,arguments);else{var c=b.findDOMNode(this);a=c.querySelector.apply(c,arguments)}return a},getCollection:function(){return this.wrapper.collection||this.context.parentCollection},getModel:function(){return this.wrapper.model||this.context.parentModel},setElement:function(a){if(a&&c.$&&a instanceof c.$){if(a.length>1)throw new Error("You can only assign one element to a component");this.el=a[0],this.$el=a}else a&&(this.el=a,c.$&&(this.$el=c.$(a)));return this}};return d.extend(e.prototype,c.Events,{onError:function(a,b,c){c.silent||this.component.setState({isRequesting:!1,hasError:!0,error:b})},onInvalid:function(a,b,c){c.silent||this.component.setState({isInvalid:!0})},onRequest:function(a,b,c){c.silent||this.component.setState({isRequesting:!0,hasError:!1,isInvalid:!1})},onSync:function(a,b,c){c.silent||this.component.setState({isRequesting:!1})},setModels:function(a,b,c){var e="undefined"!=typeof a;if(e&&!a.attributes)if("object"==typeof a){var f=d.values(a);e=f.length>0&&f[0].attributes}else e=!1;e&&(this.model=a,this.setStateBackbone(a,void 0,b,c),this.startModelListeners(a))},setCollections:function(a,b,c){"undefined"!=typeof a&&(a.models||"object"==typeof a&&d.values(a)[0].models)&&(this.collection=a,this.setStateBackbone(a,void 0,b,c),this.startCollectionListeners(a))},setStateBackbone:function(a,b,c,d){if(a.models||a.attributes)this.setState.apply(this,arguments);else for(b in a)this.setStateBackbone(a[b],b,c)},getAttributes:function(a){var b=[];if(a instanceof c.Collection){for(var e=0;e
78 | {this.state.myCollection.map((model) => model.hello)}
79 |
80 | );
81 | }
82 | }
83 | ```
84 |
85 | ### Mixin Usage
86 |
87 | #### One model
88 | ```js
89 | var MyComponent = React.createClass({
90 | mixins: [Backbone.React.Component.mixin],
91 | render: function () {
92 | return {this.state.model.foo}
;
93 | }
94 | });
95 |
96 | var model = new Backbone.Model({foo: 'bar'});
97 |
98 | ReactDOM.render({entry.helloWorld}
;
110 | },
111 | render: function () {
112 | return {this.state.collection.map(this.createEntry)}
;
113 | }
114 | });
115 | var collection = new Backbone.Collection([
116 | {id: 0, helloWorld: 'Hello world!'},
117 | {id: 1, helloWorld: 'Hello world!'}
118 | ]);
119 |
120 | ReactDOM.render({entry.helloWorld}
;
129 | },
130 | render: function () {
131 | return (
132 |
133 | {this.state.firstModel.helloWorld}
134 | {this.state.secondModel.helloWorld}
135 | {this.state.firstCollection.map(this.createEntry)}
136 | {this.state.secondCollection.map(this.createEntry)}
137 |
138 | );
139 | }
140 | });
141 |
142 | var MyFactory = React.createFactory(MyComponent);
143 |
144 | var newComponent = MyFactory({
145 | model: {
146 | firstModel: new Backbone.Model({helloWorld: 'Hello world!'}),
147 | secondModel: new Backbone.Model({helloWorld: 'Hello world!'})
148 | },
149 | collection: {
150 | firstCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}]),
151 | secondCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}])
152 | }
153 | });
154 | ReactDOM.render(newComponent, document.body);
155 | ```
156 |
157 | ### Usage on the server (Node.js)
158 | ```js
159 | var Backbone = require('backbone');
160 | var backboneMixin = require('backbone-react-component');
161 | var React = require('react');
162 |
163 | var model = new Backbone.Model({
164 | helloWorld: 'Hello world!'
165 | });
166 | var HelloWorld = React.createClass({
167 | mixins: [backboneMixin],
168 | render: function () {
169 | return React.DOM.div({}, this.state.model.helloWorld);
170 | }
171 | });
172 | var HelloWorldFactory = React.createFactory(HelloWorld);
173 |
174 | // Render to an HTML string
175 | ReactDOM.renderToString(HelloWorldFactory({model: model}));
176 | // Updating the model
177 | model.set('helloWorld', 'Hi again!');
178 | // Rendering to an HTML string again
179 | ReactDOM.renderToString(HelloWorldFactory({model: model}));
180 | ```
181 |
182 | ### API
183 |
184 | #### on(component, modelsAndCollectionsObject)
185 | Binds all models/collections found inside `modelsAndCollectionsObject` to
186 | `component`. `modelsAndCollectionsObject` takes the following form:
187 |
188 | ```js
189 | {
190 | models: {
191 | a: new Backbone.Model() // binds to `@state.a`
192 | },
193 | collections: {
194 | b: new Backbone.Collection() // binds to `@state.b`
195 | }
196 | }
197 | ```
198 |
199 | #### onModel(component, modelsObject)
200 | Shortcut method to `#on`. `modelsObject` can either be an object of
201 | `Backbone.Model`s or a single instance of one.
202 |
203 | #### onCollection(component, collectionsObject
204 | Shortcut method to `#on`. `collectionsObject` can either be an object of
205 | `Backbone.Collection`s or a single instance of one.
206 |
207 | #### off(component)
208 | Teardown method. Unbinds all models and collections from `component`.
209 |
210 | ### Mixin API
211 | The following API is under `Backbone.React.Component.mixin` (`require('backbone-react-component')`):
212 |
213 | #### $
214 | Inspired by Backbone.View, it's a shortcut to this.$el.find method if `jQuery`
215 | is present, else it fallbacks to native DOM `querySelector`.
216 |
217 | #### getCollection()
218 | Grabs the component's collection(s) or from one of the parents.
219 |
220 | #### getModel()
221 | Grabs the component's model(s) or from one of the parents.
222 |
223 | #### overrideModel()
224 | Hook that can be implemented to return a model or multiple models. This hook is
225 | executed when the component is initialized. It's useful on cases such as when
226 | `react-router` is being used.
227 |
228 | #### overrideCollection()
229 | Hook that can be implemented to return a collection or multiple collections.
230 | This hook is executed when the component is initialized. It's useful on cases
231 | such as when `react-router` is being used.
232 |
233 |
234 | ## Examples
235 | * [Blog](https://github.com/magalhas/backbone-react-component/tree/master/examples/blog)
236 | * [Nested](https://github.com/magalhas/backbone-react-component/tree/master/examples/nested)
237 | * [Typewriter](https://rawgithub.com/magalhas/backbone-react-component/master/examples/typewriter/index.html)
238 | * [Screencast](https://www.youtube.com/watch?v=iul1fWHVU6A)
239 |
--------------------------------------------------------------------------------
/docs/public/stylesheets/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v2.0.1 | MIT License | git.io/normalize */
2 |
3 | /* ==========================================================================
4 | HTML5 display definitions
5 | ========================================================================== */
6 |
7 | /*
8 | * Corrects `block` display not defined in IE 8/9.
9 | */
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | nav,
20 | section,
21 | summary {
22 | display: block;
23 | }
24 |
25 | /*
26 | * Corrects `inline-block` display not defined in IE 8/9.
27 | */
28 |
29 | audio,
30 | canvas,
31 | video {
32 | display: inline-block;
33 | }
34 |
35 | /*
36 | * Prevents modern browsers from displaying `audio` without controls.
37 | * Remove excess height in iOS 5 devices.
38 | */
39 |
40 | audio:not([controls]) {
41 | display: none;
42 | height: 0;
43 | }
44 |
45 | /*
46 | * Addresses styling for `hidden` attribute not present in IE 8/9.
47 | */
48 |
49 | [hidden] {
50 | display: none;
51 | }
52 |
53 | /* ==========================================================================
54 | Base
55 | ========================================================================== */
56 |
57 | /*
58 | * 1. Sets default font family to sans-serif.
59 | * 2. Prevents iOS text size adjust after orientation change, without disabling
60 | * user zoom.
61 | */
62 |
63 | html {
64 | font-family: sans-serif; /* 1 */
65 | -webkit-text-size-adjust: 100%; /* 2 */
66 | -ms-text-size-adjust: 100%; /* 2 */
67 | }
68 |
69 | /*
70 | * Removes default margin.
71 | */
72 |
73 | body {
74 | margin: 0;
75 | }
76 |
77 | /* ==========================================================================
78 | Links
79 | ========================================================================== */
80 |
81 | /*
82 | * Addresses `outline` inconsistency between Chrome and other browsers.
83 | */
84 |
85 | a:focus {
86 | outline: thin dotted;
87 | }
88 |
89 | /*
90 | * Improves readability when focused and also mouse hovered in all browsers.
91 | */
92 |
93 | a:active,
94 | a:hover {
95 | outline: 0;
96 | }
97 |
98 | /* ==========================================================================
99 | Typography
100 | ========================================================================== */
101 |
102 | /*
103 | * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
104 | * Safari 5, and Chrome.
105 | */
106 |
107 | h1 {
108 | font-size: 2em;
109 | }
110 |
111 | /*
112 | * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
113 | */
114 |
115 | abbr[title] {
116 | border-bottom: 1px dotted;
117 | }
118 |
119 | /*
120 | * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
121 | */
122 |
123 | b,
124 | strong {
125 | font-weight: bold;
126 | }
127 |
128 | /*
129 | * Addresses styling not present in Safari 5 and Chrome.
130 | */
131 |
132 | dfn {
133 | font-style: italic;
134 | }
135 |
136 | /*
137 | * Addresses styling not present in IE 8/9.
138 | */
139 |
140 | mark {
141 | background: #ff0;
142 | color: #000;
143 | }
144 |
145 |
146 | /*
147 | * Corrects font family set oddly in Safari 5 and Chrome.
148 | */
149 |
150 | code,
151 | kbd,
152 | pre,
153 | samp {
154 | font-family: monospace, serif;
155 | font-size: 1em;
156 | }
157 |
158 | /*
159 | * Improves readability of pre-formatted text in all browsers.
160 | */
161 |
162 | pre {
163 | white-space: pre;
164 | white-space: pre-wrap;
165 | word-wrap: break-word;
166 | }
167 |
168 | /*
169 | * Sets consistent quote types.
170 | */
171 |
172 | q {
173 | quotes: "\201C" "\201D" "\2018" "\2019";
174 | }
175 |
176 | /*
177 | * Addresses inconsistent and variable font size in all browsers.
178 | */
179 |
180 | small {
181 | font-size: 80%;
182 | }
183 |
184 | /*
185 | * Prevents `sub` and `sup` affecting `line-height` in all browsers.
186 | */
187 |
188 | sub,
189 | sup {
190 | font-size: 75%;
191 | line-height: 0;
192 | position: relative;
193 | vertical-align: baseline;
194 | }
195 |
196 | sup {
197 | top: -0.5em;
198 | }
199 |
200 | sub {
201 | bottom: -0.25em;
202 | }
203 |
204 | /* ==========================================================================
205 | Embedded content
206 | ========================================================================== */
207 |
208 | /*
209 | * Removes border when inside `a` element in IE 8/9.
210 | */
211 |
212 | img {
213 | border: 0;
214 | }
215 |
216 | /*
217 | * Corrects overflow displayed oddly in IE 9.
218 | */
219 |
220 | svg:not(:root) {
221 | overflow: hidden;
222 | }
223 |
224 | /* ==========================================================================
225 | Figures
226 | ========================================================================== */
227 |
228 | /*
229 | * Addresses margin not present in IE 8/9 and Safari 5.
230 | */
231 |
232 | figure {
233 | margin: 0;
234 | }
235 |
236 | /* ==========================================================================
237 | Forms
238 | ========================================================================== */
239 |
240 | /*
241 | * Define consistent border, margin, and padding.
242 | */
243 |
244 | fieldset {
245 | border: 1px solid #c0c0c0;
246 | margin: 0 2px;
247 | padding: 0.35em 0.625em 0.75em;
248 | }
249 |
250 | /*
251 | * 1. Corrects color not being inherited in IE 8/9.
252 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
253 | */
254 |
255 | legend {
256 | border: 0; /* 1 */
257 | padding: 0; /* 2 */
258 | }
259 |
260 | /*
261 | * 1. Corrects font family not being inherited in all browsers.
262 | * 2. Corrects font size not being inherited in all browsers.
263 | * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
264 | */
265 |
266 | button,
267 | input,
268 | select,
269 | textarea {
270 | font-family: inherit; /* 1 */
271 | font-size: 100%; /* 2 */
272 | margin: 0; /* 3 */
273 | }
274 |
275 | /*
276 | * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
277 | * the UA stylesheet.
278 | */
279 |
280 | button,
281 | input {
282 | line-height: normal;
283 | }
284 |
285 | /*
286 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
287 | * and `video` controls.
288 | * 2. Corrects inability to style clickable `input` types in iOS.
289 | * 3. Improves usability and consistency of cursor style between image-type
290 | * `input` and others.
291 | */
292 |
293 | button,
294 | html input[type="button"], /* 1 */
295 | input[type="reset"],
296 | input[type="submit"] {
297 | -webkit-appearance: button; /* 2 */
298 | cursor: pointer; /* 3 */
299 | }
300 |
301 | /*
302 | * Re-set default cursor for disabled elements.
303 | */
304 |
305 | button[disabled],
306 | input[disabled] {
307 | cursor: default;
308 | }
309 |
310 | /*
311 | * 1. Addresses box sizing set to `content-box` in IE 8/9.
312 | * 2. Removes excess padding in IE 8/9.
313 | */
314 |
315 | input[type="checkbox"],
316 | input[type="radio"] {
317 | box-sizing: border-box; /* 1 */
318 | padding: 0; /* 2 */
319 | }
320 |
321 | /*
322 | * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
323 | * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
324 | * (include `-moz` to future-proof).
325 | */
326 |
327 | input[type="search"] {
328 | -webkit-appearance: textfield; /* 1 */
329 | -moz-box-sizing: content-box;
330 | -webkit-box-sizing: content-box; /* 2 */
331 | box-sizing: content-box;
332 | }
333 |
334 | /*
335 | * Removes inner padding and search cancel button in Safari 5 and Chrome
336 | * on OS X.
337 | */
338 |
339 | input[type="search"]::-webkit-search-cancel-button,
340 | input[type="search"]::-webkit-search-decoration {
341 | -webkit-appearance: none;
342 | }
343 |
344 | /*
345 | * Removes inner padding and border in Firefox 4+.
346 | */
347 |
348 | button::-moz-focus-inner,
349 | input::-moz-focus-inner {
350 | border: 0;
351 | padding: 0;
352 | }
353 |
354 | /*
355 | * 1. Removes default vertical scrollbar in IE 8/9.
356 | * 2. Improves readability and alignment in all browsers.
357 | */
358 |
359 | textarea {
360 | overflow: auto; /* 1 */
361 | vertical-align: top; /* 2 */
362 | }
363 |
364 | /* ==========================================================================
365 | Tables
366 | ========================================================================== */
367 |
368 | /*
369 | * Remove most spacing between table cells.
370 | */
371 |
372 | table {
373 | border-collapse: collapse;
374 | border-spacing: 0;
375 | }
--------------------------------------------------------------------------------
/docs/docco.css:
--------------------------------------------------------------------------------
1 | /*--------------------- Typography ----------------------------*/
2 |
3 | @font-face {
4 | font-family: 'aller-light';
5 | src: url('public/fonts/aller-light.eot');
6 | src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
7 | url('public/fonts/aller-light.woff') format('woff'),
8 | url('public/fonts/aller-light.ttf') format('truetype');
9 | font-weight: normal;
10 | font-style: normal;
11 | }
12 |
13 | @font-face {
14 | font-family: 'aller-bold';
15 | src: url('public/fonts/aller-bold.eot');
16 | src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
17 | url('public/fonts/aller-bold.woff') format('woff'),
18 | url('public/fonts/aller-bold.ttf') format('truetype');
19 | font-weight: normal;
20 | font-style: normal;
21 | }
22 |
23 | @font-face {
24 | font-family: 'roboto-black';
25 | src: url('public/fonts/roboto-black.eot');
26 | src: url('public/fonts/roboto-black.eot?#iefix') format('embedded-opentype'),
27 | url('public/fonts/roboto-black.woff') format('woff'),
28 | url('public/fonts/roboto-black.ttf') format('truetype');
29 | font-weight: normal;
30 | font-style: normal;
31 | }
32 |
33 | /*--------------------- Layout ----------------------------*/
34 | html { height: 100%; }
35 | body {
36 | font-family: "aller-light";
37 | font-size: 14px;
38 | line-height: 18px;
39 | color: #30404f;
40 | margin: 0; padding: 0;
41 | height:100%;
42 | }
43 | #container { min-height: 100%; }
44 |
45 | a {
46 | color: #000;
47 | }
48 |
49 | b, strong {
50 | font-weight: normal;
51 | font-family: "aller-bold";
52 | }
53 |
54 | p {
55 | margin: 15px 0 0px;
56 | }
57 | .annotation ul, .annotation ol {
58 | margin: 25px 0;
59 | }
60 | .annotation ul li, .annotation ol li {
61 | font-size: 14px;
62 | line-height: 18px;
63 | margin: 10px 0;
64 | }
65 |
66 | h1, h2, h3, h4, h5, h6 {
67 | color: #112233;
68 | line-height: 1em;
69 | font-weight: normal;
70 | font-family: "roboto-black";
71 | text-transform: uppercase;
72 | margin: 30px 0 15px 0;
73 | }
74 |
75 | h1 {
76 | margin-top: 40px;
77 | }
78 | h2 {
79 | font-size: 1.26em;
80 | }
81 |
82 | hr {
83 | border: 0;
84 | background: 1px #ddd;
85 | height: 1px;
86 | margin: 20px 0;
87 | }
88 |
89 | pre, tt, code {
90 | font-size: 12px; line-height: 16px;
91 | font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
92 | margin: 0; padding: 0;
93 | }
94 | .annotation pre {
95 | display: block;
96 | margin: 0;
97 | padding: 7px 10px;
98 | background: #fcfcfc;
99 | -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
100 | -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
101 | box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
102 | overflow-x: auto;
103 | }
104 | .annotation pre code {
105 | border: 0;
106 | padding: 0;
107 | background: transparent;
108 | }
109 |
110 |
111 | blockquote {
112 | border-left: 5px solid #ccc;
113 | margin: 0;
114 | padding: 1px 0 1px 1em;
115 | }
116 | .sections blockquote p {
117 | font-family: Menlo, Consolas, Monaco, monospace;
118 | font-size: 12px; line-height: 16px;
119 | color: #999;
120 | margin: 10px 0 0;
121 | white-space: pre-wrap;
122 | }
123 |
124 | ul.sections {
125 | list-style: none;
126 | padding:0 0 5px 0;;
127 | margin:0;
128 | }
129 |
130 | /*
131 | Force border-box so that % widths fit the parent
132 | container without overlap because of margin/padding.
133 |
134 | More Info : http://www.quirksmode.org/css/box.html
135 | */
136 | ul.sections > li > div {
137 | -moz-box-sizing: border-box; /* firefox */
138 | -ms-box-sizing: border-box; /* ie */
139 | -webkit-box-sizing: border-box; /* webkit */
140 | -khtml-box-sizing: border-box; /* konqueror */
141 | box-sizing: border-box; /* css3 */
142 | }
143 |
144 |
145 | /*---------------------- Jump Page -----------------------------*/
146 | #jump_to, #jump_page {
147 | margin: 0;
148 | background: white;
149 | -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
150 | -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
151 | font: 16px Arial;
152 | cursor: pointer;
153 | text-align: right;
154 | list-style: none;
155 | }
156 |
157 | #jump_to a {
158 | text-decoration: none;
159 | }
160 |
161 | #jump_to a.large {
162 | display: none;
163 | }
164 | #jump_to a.small {
165 | font-size: 22px;
166 | font-weight: bold;
167 | color: #676767;
168 | }
169 |
170 | #jump_to, #jump_wrapper {
171 | position: fixed;
172 | right: 0; top: 0;
173 | padding: 10px 15px;
174 | margin:0;
175 | }
176 |
177 | #jump_wrapper {
178 | display: none;
179 | padding:0;
180 | }
181 |
182 | #jump_to:hover #jump_wrapper {
183 | display: block;
184 | }
185 |
186 | #jump_page_wrapper{
187 | position: fixed;
188 | right: 0;
189 | top: 0;
190 | bottom: 0;
191 | }
192 |
193 | #jump_page {
194 | padding: 5px 0 3px;
195 | margin: 0 0 25px 25px;
196 | max-height: 100%;
197 | overflow: auto;
198 | }
199 |
200 | #jump_page .source {
201 | display: block;
202 | padding: 15px;
203 | text-decoration: none;
204 | border-top: 1px solid #eee;
205 | }
206 |
207 | #jump_page .source:hover {
208 | background: #f5f5ff;
209 | }
210 |
211 | #jump_page .source:first-child {
212 | }
213 |
214 | /*---------------------- Low resolutions (> 320px) ---------------------*/
215 | @media only screen and (min-width: 320px) {
216 | .pilwrap { display: none; }
217 |
218 | ul.sections > li > div {
219 | display: block;
220 | padding:5px 10px 0 10px;
221 | }
222 |
223 | ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
224 | padding-left: 30px;
225 | }
226 |
227 | ul.sections > li > div.content {
228 | overflow-x:auto;
229 | -webkit-box-shadow: inset 0 0 5px #e5e5ee;
230 | box-shadow: inset 0 0 5px #e5e5ee;
231 | border: 1px solid #dedede;
232 | margin:5px 10px 5px 10px;
233 | padding-bottom: 5px;
234 | }
235 |
236 | ul.sections > li > div.annotation pre {
237 | margin: 7px 0 7px;
238 | padding-left: 15px;
239 | }
240 |
241 | ul.sections > li > div.annotation p tt, .annotation code {
242 | background: #f8f8ff;
243 | border: 1px solid #dedede;
244 | font-size: 12px;
245 | padding: 0 0.2em;
246 | }
247 | }
248 |
249 | /*---------------------- (> 481px) ---------------------*/
250 | @media only screen and (min-width: 481px) {
251 | #container {
252 | position: relative;
253 | }
254 | body {
255 | background-color: #F5F5FF;
256 | font-size: 15px;
257 | line-height: 21px;
258 | }
259 | pre, tt, code {
260 | line-height: 18px;
261 | }
262 | p, ul, ol {
263 | margin: 0 0 15px;
264 | }
265 |
266 |
267 | #jump_to {
268 | padding: 5px 10px;
269 | }
270 | #jump_wrapper {
271 | padding: 0;
272 | }
273 | #jump_to, #jump_page {
274 | font: 10px Arial;
275 | text-transform: uppercase;
276 | }
277 | #jump_page .source {
278 | padding: 5px 10px;
279 | }
280 | #jump_to a.large {
281 | display: inline-block;
282 | }
283 | #jump_to a.small {
284 | display: none;
285 | }
286 |
287 |
288 |
289 | #background {
290 | position: absolute;
291 | top: 0; bottom: 0;
292 | width: 350px;
293 | background: #fff;
294 | border-right: 1px solid #e5e5ee;
295 | z-index: -1;
296 | }
297 |
298 | ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
299 | padding-left: 40px;
300 | }
301 |
302 | ul.sections > li {
303 | white-space: nowrap;
304 | }
305 |
306 | ul.sections > li > div {
307 | display: inline-block;
308 | }
309 |
310 | ul.sections > li > div.annotation {
311 | max-width: 350px;
312 | min-width: 350px;
313 | min-height: 5px;
314 | padding: 13px;
315 | overflow-x: hidden;
316 | white-space: normal;
317 | vertical-align: top;
318 | text-align: left;
319 | }
320 | ul.sections > li > div.annotation pre {
321 | margin: 15px 0 15px;
322 | padding-left: 15px;
323 | }
324 |
325 | ul.sections > li > div.content {
326 | padding: 13px;
327 | vertical-align: top;
328 | border: none;
329 | -webkit-box-shadow: none;
330 | box-shadow: none;
331 | }
332 |
333 | .pilwrap {
334 | position: relative;
335 | display: inline;
336 | }
337 |
338 | .pilcrow {
339 | font: 12px Arial;
340 | text-decoration: none;
341 | color: #454545;
342 | position: absolute;
343 | top: 3px; left: -20px;
344 | padding: 1px 2px;
345 | opacity: 0;
346 | -webkit-transition: opacity 0.2s linear;
347 | }
348 | .for-h1 .pilcrow {
349 | top: 47px;
350 | }
351 | .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
352 | top: 35px;
353 | }
354 |
355 | ul.sections > li > div.annotation:hover .pilcrow {
356 | opacity: 1;
357 | }
358 | }
359 |
360 | /*---------------------- (> 1025px) ---------------------*/
361 | @media only screen and (min-width: 1025px) {
362 |
363 | body {
364 | font-size: 16px;
365 | line-height: 24px;
366 | }
367 |
368 | #background {
369 | width: 525px;
370 | }
371 | ul.sections > li > div.annotation {
372 | max-width: 525px;
373 | min-width: 525px;
374 | padding: 10px 25px 1px 50px;
375 | }
376 | ul.sections > li > div.content {
377 | padding: 9px 15px 16px 25px;
378 | }
379 | }
380 |
381 | /*---------------------- Syntax Highlighting -----------------------------*/
382 |
383 | td.linenos { background-color: #f0f0f0; padding-right: 10px; }
384 | span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
385 | /*
386 |
387 | github.com style (c) Vasily Polovnyov {this.state.model.foo}
;
25 | // }
26 | // });
27 | // var model = new Backbone.Model({foo: 'bar'});
28 | // ReactDOM.render(
411 |
--------------------------------------------------------------------------------
/lib/component.js:
--------------------------------------------------------------------------------
1 | // Backbone React Component
2 | // ========================
3 | //
4 | // Backbone.React.Component v0.10.0
5 | //
6 | // (c) 2014, 2015 "Magalhas" José Magalhães {this.state.model.foo}
;
25 | // }
26 | // });
27 | // var model = new Backbone.Model({foo: 'bar'});
28 | // ReactDOM.render(
411 |
--------------------------------------------------------------------------------
/docs/component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 |
13 |
14 |
1036 |
1037 |
1038 |
--------------------------------------------------------------------------------
-
15 |
16 |
17 |
18 |
-
19 | 20 | 21 |27 | 28 |22 | ¶ 23 |24 |
Backbone React Component
25 | 26 |
29 |
30 |
31 | -
32 | 33 | 34 |57 | 58 |35 | ¶ 36 |37 |
Backbone.React.Component v0.10.0 38 | 39 | (c) 2014, 2015 "Magalhas" José Magalhães <magalhas@gmail.com> 40 | Backbone.React.Component can be freely distributed under the MIT license. 41 |
43 |Backbone.React.Componentis a mixin that glues Backbone 42 | models and collections into React components.When the component is mounted, a wrapper starts listening to models and 44 | collections changes to automatically set your component state and achieve UI 45 | binding through reactive updates.
46 |Basic Usage
47 |var MyComponent = React.createClass({ 48 | mixins: [Backbone.React.Component.mixin], 49 | render: function () { 50 | return <div>{this.state.model.foo}</div>; 51 | } 52 | }); 53 | var model = new Backbone.Model({foo: 'bar'}); 54 | ReactDOM.render(<MyComponent model={model} />, document.body); 55 |60 | 61 |
62 |
63 |
64 | -
65 | 66 | 67 |73 | 74 |68 | ¶ 69 |70 |
Universal module definition
71 | 72 |89 | 90 |if (typeof define === 'function' && define.amd) { 75 | define(['react', 'react-dom', 'backbone', 'underscore'], factory); 76 | } else if (typeof module !== 'undefined' && module.exports) { 77 | module.exports = factory(require('react'), require('react-dom'), require('backbone'), require('underscore')); 78 | } else { 79 | factory(root.React, root.ReactDOM, root.Backbone, root._); 80 | } 81 | }(this, function (React, ReactDOM, Backbone, _) { 82 | 'use strict'; 83 | if (!Backbone.React) { 84 | Backbone.React = {}; 85 | } 86 | if (!Backbone.React.Component) { 87 | Backbone.React.Component = {}; 88 | }
91 |
92 |
93 | -
94 | 95 | 96 |102 | 103 |97 | ¶ 98 |99 |
Mixin used in all component instances. Exported through
100 | 101 |Backbone.React.Component.mixin.104 | 105 |var mixin = Backbone.React.Component.mixin = {
106 |
107 |
108 | -
109 | 110 | 111 |118 | 119 |112 | ¶ 113 |114 |
Types of the context passed to child components. Only 115 |
116 | 117 |hasParentBackboneMixinis required all of the others are optional.124 | 125 |childContextTypes: { 120 | hasParentBackboneMixin: React.PropTypes.bool.isRequired, 121 | parentModel: React.PropTypes.any, 122 | parentCollection: React.PropTypes.any 123 | },
126 |
127 |
128 | -
129 | 130 | 131 |138 | 139 |132 | ¶ 133 |134 |
Types of the context received from the parent component. All of them are 135 | optional.
136 | 137 |144 | 145 |contextTypes: { 140 | hasParentBackboneMixin: React.PropTypes.bool, 141 | parentModel: React.PropTypes.any, 142 | parentCollection: React.PropTypes.any 143 | },
146 |
147 |
148 | -
149 | 150 | 151 |157 | 158 |152 | ¶ 153 |154 |
Passes data to our child components.
155 | 156 |165 | 166 |getChildContext: function () { 159 | return { 160 | hasParentBackboneMixin: true, 161 | parentModel: this.getModel(), 162 | parentCollection: this.getCollection() 163 | }; 164 | },
167 |
168 |
169 | -
170 | 171 | 172 |178 | 179 |173 | ¶ 174 |175 |
Sets
176 | 177 |this.elandthis.$elwhen the component mounts.182 | 183 |componentDidMount: function () { 180 | this.setElement(ReactDOM.findDOMNode(this)); 181 | },
184 |
185 |
186 | -
187 | 188 | 189 |195 | 196 |190 | ¶ 191 |192 |
Sets
193 | 194 |this.elandthis.$elwhen the component updates.199 | 200 |componentDidUpdate: function () { 197 | this.setElement(ReactDOM.findDOMNode(this)); 198 | },
201 |
202 |
203 | -
204 | 205 | 206 |213 | 214 |207 | ¶ 208 |209 |
When the component gets the initial state, instance a
211 | 212 |Wrapperto take 210 | care of models and collections binding withthis.state.223 | 224 |getInitialState: function () { 215 | var initialState = {}; 216 | 217 | if (!this.wrapper) { 218 | this.wrapper = new Wrapper(this, initialState); 219 | } 220 | 221 | return initialState; 222 | },
225 |
226 |
227 | -
228 | 229 | 230 |237 | 238 |231 | ¶ 232 |233 |
When the component mounts, instance a
235 | 236 |Wrapperto take care 234 | of models and collections binding withthis.state.243 | 244 |componentWillMount: function () { 239 | if (!this.wrapper) { 240 | this.wrapper = new Wrapper(this); 241 | } 242 | },
245 |
246 |
247 | -
248 | 249 | 250 |257 | 258 |251 | ¶ 252 |253 |
When the component unmounts, dispose listeners and delete 254 |
255 | 256 |this.wrapperreference.264 | 265 |componentWillUnmount: function () { 259 | if (this.wrapper) { 260 | this.wrapper.stopListening(); 261 | delete this.wrapper; 262 | } 263 | },
266 |
267 |
268 | -
269 | 270 | 271 |278 | 279 |272 | ¶ 273 |274 |
In order to allow passing nested models and collections as reference we 275 | filter
276 | 277 |nextProps.modelandnextProps.collection.301 | 302 |componentWillReceiveProps: function (nextProps) { 280 | var model = nextProps.model; 281 | var collection = nextProps.collection; 282 | 283 | if (this.wrapper.model && model) { 284 | if (this.wrapper.model !== model) { 285 | this.wrapper.stopListening(); 286 | this.wrapper = new Wrapper(this, void 0, nextProps); 287 | } 288 | } else if (model) { 289 | this.wrapper = new Wrapper(this, void 0, nextProps); 290 | } 291 | 292 | if (this.wrapper.collection && collection) { 293 | if (this.wrapper.collection !== collection) { 294 | this.wrapper.stopListening(); 295 | this.wrapper = new Wrapper(this, void 0, nextProps); 296 | } 297 | } else if (collection) { 298 | this.wrapper = new Wrapper(this, void 0, nextProps); 299 | } 300 | },
303 |
304 |
305 | -
306 | 307 | 308 |315 | 316 |309 | ¶ 310 |311 |
Shortcut to
313 | 314 |@$el.findif jQuery ins present, else if fallbacks to DOM 312 | nativequerySelector. Inspired byBackbone.View.328 | 329 |$: function () { 317 | var els; 318 | 319 | if (this.$el) { 320 | els = this.$el.find.apply(this.$el, arguments); 321 | } else { 322 | var el = ReactDOM.findDOMNode(this); 323 | els = el.querySelector.apply(el, arguments); 324 | } 325 | 326 | return els; 327 | },
330 |
331 |
332 | -
333 | 334 | 335 |341 | 342 |336 | ¶ 337 |338 |
Grabs the collection from
339 | 340 |@wrapper.collectionor@context.parentCollection345 | 346 |getCollection: function () { 343 | return this.wrapper.collection || this.context.parentCollection; 344 | },
347 |
348 |
349 | -
350 | 351 | 352 |358 | 359 |353 | ¶ 354 |355 |
Grabs the model from
356 | 357 |@wrapper.modelor@context.parentModel362 | 363 |getModel: function () { 360 | return this.wrapper.model || this.context.parentModel; 361 | },
364 |
365 |
366 | -
367 | 368 | 369 |375 | 376 |370 | ¶ 371 |372 |
Sets a DOM element to render/mount this component on this.el and this.$el.
373 | 374 |392 | 393 |setElement: function (el) { 377 | if (el && Backbone.$ && el instanceof Backbone.$) { 378 | if (el.length > 1) { 379 | throw new Error('You can only assign one element to a component'); 380 | } 381 | this.el = el[0]; 382 | this.$el = el; 383 | } else if (el) { 384 | this.el = el; 385 | if (Backbone.$) { 386 | this.$el = Backbone.$(el); 387 | } 388 | } 389 | return this; 390 | } 391 | };
394 |
395 |
396 | -
397 | 398 | 399 |405 | 406 |400 | ¶ 401 |402 |
Binds models and collections to a
403 | 404 |React.Component. It mixesBackbone.Events.407 | 408 |function Wrapper (component, initialState, nextProps) {
409 |
410 |
411 | -
412 | 413 | 414 |420 | 421 |415 | ¶ 416 |417 |
Object to store wrapper state (not the component state)
418 | 419 |422 | 423 |this.state = {};
424 |
425 |
426 | -
427 | 428 | 429 |435 | 436 |430 | ¶ 431 |432 |
1:1 relation with the
433 | 434 |component437 | 438 |this.component = component;
439 |
440 |
441 | -
442 | 443 | 444 |451 | 452 |445 | ¶ 446 |447 |
Use
449 | 450 |nextPropsorcomponent.propsand grabmodelandcollection448 | from there456 | 457 |var props = nextProps || component.props || {}; 453 | var model, collection; 454 | 455 | if (component.overrideModel && typeof component.overrideModel === 'function'){
458 |
459 |
460 | -
461 | 462 | 463 |470 | 471 |464 | ¶ 465 |466 |
Define overrideModel() method on your
468 | 469 |React classto programatically supply a model object 467 | Will overridethis.props.model477 | 478 |model = component.overrideModel(); 472 | } else { 473 | model = props.model; 474 | } 475 | 476 | if (component.overrideCollection && typeof component.overrideCollection === 'function'){
479 |
480 |
481 | -
482 | 483 | 484 |491 | 492 |485 | ¶ 486 |487 |
Define overrideCollection() method on your
489 | 490 |React classto programatically supply a collection object 488 | Will overridethis.props.collection500 | 501 |collection = component.overrideCollection(); 493 | } else { 494 | collection = props.collection; 495 | } 496 | 497 | this.setModels(model, initialState); 498 | this.setCollections(collection, initialState); 499 | }
502 |
503 |
504 | -
505 | 506 | 507 |513 | 514 |508 | ¶ 509 |510 |
Mixing
511 | 512 |Backbone.EventsintoWrapper.prototype515 | 516 |_.extend(Wrapper.prototype, Backbone.Events, {
517 |
518 |
519 | -
520 | 521 | 522 |529 | 530 |523 | ¶ 524 |525 |
Sets
527 | 528 |this.statewhen a model/collection request results in error. It delegates 526 | tothis.setState. It listens toBackbone.Model#errorandBackbone.Collection#error.531 | 532 |onError: function (modelOrCollection, res, options) {
533 |
534 |
535 | -
536 | 537 | 538 |544 | 545 |539 | ¶ 540 |541 |
Set state only if there’s no silent option
542 | 543 |560 | 561 |if (!options.silent) { 546 | this.component.setState({ 547 | isRequesting: false, 548 | hasError: true, 549 | error: res 550 | }); 551 | } 552 | }, 553 | onInvalid: function (model, res, options) { 554 | if (!options.silent) { 555 | this.component.setState({ 556 | isInvalid: true 557 | }); 558 | } 559 | },
562 |
563 |
564 | -
565 | 566 | 567 |575 | 576 |568 | ¶ 569 |570 |
Sets
573 | 574 |this.statewhen a model/collection request starts. It delegates to 571 |this.setState. It listens toBackbone.Model#requestand 572 |Backbone.Collection#request.577 | 578 |onRequest: function (modelOrCollection, xhr, options) {
579 |
580 |
581 | -
582 | 583 | 584 |590 | 591 |585 | ¶ 586 |587 |
Set
588 | 589 |stateonly if there’s no silent option599 | 600 |if (!options.silent) { 592 | this.component.setState({ 593 | isRequesting: true, 594 | hasError: false, 595 | isInvalid: false 596 | }); 597 | } 598 | },
601 |
602 |
603 | -
604 | 605 | 606 |613 | 614 |607 | ¶ 608 |609 |
Sets
611 | 612 |this.statewhen a model/collection syncs. It delegates tothis.setState. 610 | It listens toBackbone.Model#syncandBackbone.Collection#sync615 | 616 |onSync: function (modelOrCollection, res, options) {
617 |
618 |
619 | -
620 | 621 | 622 |628 | 629 |623 | ¶ 624 |625 |
Calls
626 | 627 |setStateonly if there’s no silent option633 | 634 |if (!options.silent) { 630 | this.component.setState({isRequesting: false}); 631 | } 632 | },
635 |
636 |
637 | -
638 | 639 | 640 |647 | 648 |641 | ¶ 642 |643 |
Check if
645 | 646 |modelsis aBackbone.Modelor an hashmap of them, sets them 644 | to the component state and binds to update on any future changes664 | 665 |setModels: function (models, initialState, isDeferred) { 649 | var isValid = typeof models !== 'undefined'; 650 | 651 | if (isValid) { 652 | if (!models.attributes) { 653 | if (typeof models === 'object') { 654 | var _values = _.values(models); 655 | isValid = _values.length > 0 && _values[0].attributes; 656 | } else { 657 | isValid = false; 658 | } 659 | } 660 | } 661 | 662 | if (isValid) { 663 | this.model = models;
666 |
667 |
668 | -
669 | 670 | 671 |677 | 678 |672 | ¶ 673 |674 |
Set model(s) attributes on
675 | 676 |initialStatefor the first render682 | 683 |this.setStateBackbone(models, void 0, initialState, isDeferred); 679 | this.startModelListeners(models); 680 | } 681 | },
684 |
685 |
686 | -
687 | 688 | 689 |696 | 697 |690 | ¶ 691 |692 |
Check if
694 | 695 |collectionsis aBackbone.Modelor an hashmap of them, 693 | sets them to the component state and binds to update on any future changes700 | 701 |setCollections: function (collections, initialState, isDeferred) { 698 | if (typeof collections !== 'undefined' && (collections.models || 699 | typeof collections === 'object' && _.values(collections)[0].models)) {
702 |
703 |
704 | -
705 | 706 | 707 |713 | 714 |708 | ¶ 709 |710 |
The collection(s) bound to this component
711 | 712 |715 | 716 |this.collection = collections;
717 |
718 |
719 | -
720 | 721 | 722 |728 | 729 |723 | ¶ 724 |725 |
Set collection(s) models on
726 | 727 |initialStatefor the first render733 | 734 |this.setStateBackbone(collections, void 0, initialState, isDeferred); 730 | this.startCollectionListeners(collections); 731 | } 732 | },
735 |
736 |
737 | -
738 | 739 | 740 |748 | 749 |741 | ¶ 742 |743 |
Used internally to set
746 | 747 |this.collectionorthis.modelonthis.state. Delegates to 744 |this.setState. It listens toBackbone.Collectionevents such asupdate, 745 |change,sort,resetand toBackbone.Modelchange.757 | 758 |setStateBackbone: function (modelOrCollection, key, target, isDeferred) { 750 | if (!(modelOrCollection.models || modelOrCollection.attributes)) { 751 | for (key in modelOrCollection) 752 | this.setStateBackbone(modelOrCollection[key], key, target); 753 | return; 754 | } 755 | this.setState.apply(this, arguments); 756 | },
759 |
760 |
761 | -
762 | 763 | 764 |770 | 771 |765 | ¶ 766 |767 |
Get the attributes for the collection or model as array or hash
768 | 769 |773 | 774 |getAttributes: function (modelOrCollection){ 772 | var attrs = [];
775 |
776 |
777 | -
778 | 779 | 780 |786 | 787 |781 | ¶ 782 |783 |
if a collection, get the attributes of each, otherwise return modelOrCollection
784 | 785 |796 | 797 |if (modelOrCollection instanceof Backbone.Collection) { 788 | for (var i = 0; i < modelOrCollection.models.length; i++) { 789 | attrs.push(_.clone(modelOrCollection.models[i].attributes)); 790 | } 791 | return attrs; 792 | } else { 793 | return _.clone(modelOrCollection.attributes); 794 | } 795 | },
798 |
799 |
800 | -
801 | 802 | 803 |809 | 810 |804 | ¶ 805 |806 |
Sets a model, collection or object into state by delegating to
807 | 808 |this.component.setState.836 | 837 |setState: function (modelOrCollection, key, target, isDeferred) { 811 | var state = {}; 812 | var newState = this.getAttributes(modelOrCollection); 813 | 814 | if (key) { 815 | state[key] = newState; 816 | } else if (modelOrCollection.models) { 817 | state.collection = newState; 818 | } else { 819 | state.model = newState; 820 | } 821 | 822 | if (target) { 823 | _.extend(target, state); 824 | } else if (isDeferred) { 825 | this.nextState = _.extend(this.nextState || {}, state); 826 | _.defer(_.bind(function () { 827 | if (this.nextState) { 828 | this.component.setState(this.nextState); 829 | this.nextState = null; 830 | } 831 | }, this)); 832 | } else { 833 | this.component.setState(state); 834 | } 835 | },
838 |
839 |
840 | -
841 | 842 | 843 |849 | 850 |844 | ¶ 845 |846 |
Binds the component to any collection changes.
847 | 848 |866 | 867 |startCollectionListeners: function (collection, key) { 851 | if (!collection) collection = this.collection; 852 | if (collection) { 853 | if (collection.models) 854 | this 855 | .listenTo(collection, 'update change sort reset', 856 | _.partial(this.setStateBackbone, collection, key, void 0, true)) 857 | .listenTo(collection, 'error', this.onError) 858 | .listenTo(collection, 'request', this.onRequest) 859 | .listenTo(collection, 'sync', this.onSync); 860 | else if (typeof collection === 'object') 861 | for (key in collection) 862 | if (collection.hasOwnProperty(key)) 863 | this.startCollectionListeners(collection[key], key); 864 | } 865 | },
868 |
869 |
870 | -
871 | 872 | 873 |879 | 880 |874 | ¶ 875 |876 |
Binds the component to any model changes.
877 | 878 |897 | 898 |startModelListeners: function (model, key) { 881 | if (!model) model = this.model; 882 | if (model) { 883 | if (model.attributes) 884 | this 885 | .listenTo(model, 'change', 886 | _.partial(this.setStateBackbone, model, key, void 0, true)) 887 | .listenTo(model, 'error', this.onError) 888 | .listenTo(model, 'request', this.onRequest) 889 | .listenTo(model, 'sync', this.onSync) 890 | .listenTo(model, 'invalid', this.onInvalid); 891 | else if (typeof model === 'object') 892 | for (key in model) 893 | this.startModelListeners(model[key], key); 894 | } 895 | } 896 | });
899 |
900 |
901 | -
902 | 903 | 904 |913 | 914 |905 | ¶ 906 |907 |
Facade method to bypass the
911 | 912 |mixinusage. For use cases such as ES6 908 | classes or else. It binds anyBackbone.ModelandBackbone.Collection909 | instance found insidebackboneInstances.modelsand 910 |backboneInstances.collections(single instances or objects of them)931 | 932 |mixin.on = function (component, backboneInstances) { 915 | var wrapper; 916 | 917 | if (!component.wrapper) { 918 | wrapper = new Wrapper(component); 919 | } else { 920 | wrapper = component.wrapper; 921 | } 922 | 923 | if (backboneInstances.models) { 924 | wrapper.setModels(backboneInstances.models); 925 | } 926 | if (backboneInstances.collections) { 927 | wrapper.setCollections(backboneInstances.collections); 928 | } 929 | component.wrapper = wrapper; 930 | };
933 |
934 |
935 | -
936 | 937 | 938 |944 | 945 |939 | ¶ 940 |941 |
Shortcut method to bind a model or multiple models
942 | 943 |948 | 949 |mixin.onModel = function (component, models) { 946 | mixin.on(component, {models: models}); 947 | };
950 |
951 |
952 | -
953 | 954 | 955 |961 | 962 |956 | ¶ 957 |958 |
Shortcut method to bind a collection or multiple collections
959 | 960 |965 | 966 |mixin.onCollection = function (component, collections) { 963 | mixin.on(component, {collections: collections}); 964 | };
967 |
968 |
969 | -
970 | 971 | 972 |978 | 979 |973 | ¶ 974 |975 |
Facade method to dispose of a
976 | 977 |component.wrapper983 | 984 |mixin.off = function (component, modelOrCollection) { 980 | if (arguments.length === 2) { 981 | if (component.wrapper) { 982 | component.wrapper.stopListening(modelOrCollection);
985 |
986 |
987 | -
988 | 989 | 990 |996 | 997 |991 | ¶ 992 |993 |
TODO Remove modelOrCollection from
994 | 995 |component.state?1002 | 1003 |} 998 | } else { 999 | mixin.componentWillUnmount.call(component); 1000 | } 1001 | };
1004 |
1005 |
1006 | -
1007 | 1008 | 1009 |1015 | 1016 |1010 | ¶ 1011 |1012 |
Expose
1013 | 1014 |Backbone.React.Component.mixin.1018 | 1019 |return mixin; 1017 | }));
1020 |
1021 |
1022 | -
1023 | 1024 | 1025 |1031 | 1032 |1026 | ¶ 1027 |1028 |
1029 | 1030 |
1033 |
1034 |