Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//fb.me/react-0.12.2.js">
</script>
  <script src="https://rawgit.com/jhollingworth/marty/master/dist/marty.js">
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>
 
​
 
​
var Events = Marty.createConstants(["Details", "Select", "Render", "List"]);
​
​
var VideoStore = Marty.createStore({
  displayName: "Store",
  handlers: {
    list: Events.List,
    render: Events.Render
  },
  getInitialState: function () {
    return {};
  },
  list: function () {
    return this.fetch({
      id: "list",
      locally: function () {
        if (this.hasAlreadyFetched("list")) return this.state.items;
      },
      remotely: function () {
        return DissolveStateSource.list();
      }
    });
  },
  select: function () {},
  render: function () {}
});
​
var StateMixin = Marty.createStateMixin({
  listenTo: VideoStore,
  getState: function () {
    return {
      items: VideoStore.list(),
      currentItem: VideoStore.select() };
  }
});
​
​
$(function () {
​
  return React.render(React.createElement(VideosTable, null), $("#container")[0]);
});
​
var VideosTable = React.createClass({
  displayName: "VideosTable",
  mixins: [StateMixin],
  render: function () {
    console.log("State is: " + this.state);
    var body = this.state.list.when({
      pending: function () {
        return React.createElement("span", { className: "ball" });
      },
      failed: function (error) {
        return React.createElement(
          "div",
          { className: "error" },
          "error.message"
        );
      },
      done: function (videos) {
        return React.createElement(
          "div",
          null,
          "Videos"
        );
      }
    });
​
    return React.createElement(
      "h2",
      null,
      "hello"
    );
  }
});
​
var DissolveStateSource = Marty.createStateSource({
  type: "http",
  baseUrl: "/dissolve",
  list: function () {
    return this.get("/list").then(function () {});
  }
});
​
​
var Actions = Marty.createActionCreators({
  list: Events.List()
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers