Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AsyncDependencies
var AsyncDependencies = require("react-asyncdependencies");
var request = require("request");
var TodoList = React.createClass({
mixins: [AsyncDependencies.Mixin],
getInitialState: function() {
return {
todosIds: null,
};
},
getAsyncDependencies: function(props, context) {
return {
todosIds: function(fn) {
request("http://" + context.restEndpoint + "/todoLists/" + props.listId, fn);
},
};
},
getAsyncChildren: function(props, asyncState, context) {
return _.map(asyncState.todosIds, function(todoId) {
return (<Todo todoItemId={todoId} />);
});
},
render: function() {
return (<ul>
{
_.map(this.state.todosIds, function(todoId) {
return (<li><Todo todoItemId={todoId} /></li>);
})
}
</ul>);
};
});
var Todo = React.createClass({
mixins: [AsyncDependencies.Mixin],
getInitialState: function() {
return {
todoItemData: null,
};
},
getAsyncDependencies: function(props, context) {
return {
todoItemData: function(fn) {
request("http://" + context.restEndpoint + "/todoItems/" + props.todoItemId, fn);
},
};
},
getAsyncChildren: function() {
return [];
},
render: function() {
return (
<div>{JSON.stringify(this.state.todoItemData)}</div>
);
},
});
// On the server :
app.get("/:listId", function(req, res) {
co(function*() {
var context = {
restEndpoint: "my-neat-rest-server.net",
};
var asyncDeps = yield AsyncDependencies.renderDependenciesToScriptString(<TodoList listId={42} />, context, "my-custom-identifier");
var html = indexTemplate.render({ asyncDeps: asyncDeps });
res.end(html);
});
});
// On the client :
AsyncDependencies.mountAsyncComponent("my-custom-identifier", document.getElementById("app"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment