Skip to content

Instantly share code, notes, and snippets.

@btholt
Created August 11, 2015 20:31
Show Gist options
  • Save btholt/a5908e50eec2941ae6d7 to your computer and use it in GitHub Desktop.
Save btholt/a5908e50eec2941ae6d7 to your computer and use it in GitHub Desktop.
Falcor + React
const React = require('react');
const _ = require('lodash');
var model = new falcor.Model({
cache: {
movies: [
{
title: "Daredevil",
plot: "Marvel lol",
year: "2015-",
id: 1
},
{
title: "Orange is the New Black",
plot: "Prison lol",
year: "2013-",
id: 2
},
{
title: "House of Cards",
plot: "Politics lol",
year: "2013-",
id: 3
},
{
title: "Unbreakable Kimmy Schimdt",
year: "2015-",
plot: "Apocalypse lol",
id: 4
},
{
title: "Wet Hot American Summer: First Day of Camp",
year: "2015-",
plot: "Summercamp lol",
id: 5
},
]
}
});
const MovieList = React.createClass({
displayName: "MovieList",
getInitialState() {
return {
movies: []
}
},
componentDidMount() {
model.get(["movies", {from:0, to: 10}, Movie.queries.movie()]).subscribe( (data) => {
this.setState({movies: _.values(data.json.movies)});
});
},
render() {
return (
<div>
{this.state.movies.map( el => <Movie movie={el} /> )}
</div>
);
}
});
const Movie = React.createClass({
displayName:"Movie",
statics: {
queries: {
movie() {
return _.union(Plot.queries.movie(), Title.queries.movie(), Year.queries.movie());
}
}
},
render() {
return (
<div style={{border: "1px solid black"}}>
<Title {..._.pick(this.props.movie, Title.queries.movie())} />
<Year {..._.pick(this.props.movie, Year.queries.movie())} />
<Plot {..._.pick(this.props.movie, Plot.queries.movie())} />
</div>
);
}
});
const Title = React.createClass({
displayName: "Title",
statics: {
queries: {
movie() {
return ["title"];
}
}
},
render() {
return <h1>{this.props.title}</h1>
}
});
const Plot = React.createClass({
displayName: "Plot",
statics: {
queries: {
movie() {
return ["plot"];
}
}
},
render() {
return <h1>{this.props.plot}</h1>
}
});
const Year = React.createClass({
displayName: "Year",
statics: {
queries: {
movie() {
return ["year"];
}
}
},
render() {
return <h1>{this.props.year}</h1>
}
});
React.render(<MovieList/>, window.document.querySelector(".target"));
@kristianmandrup
Copy link

Wow! Looks so simple and intuitive :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment