JSFiddle - React, Tailwind, and code Playground

by wilkerlucio

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.1.min.js"></script>
    <script type="text/x-handlebars" data-template-name="sample">
      {{value}}
    </script>
    <script type="text/x-handlebars">
      Raw: {{App.model.value}}<br />
      Card: {{view EmberRouting.View routerBinding="App.router"}}
        <br/><br />
      <button type="button" onclick="App.router.set('current', 'home')">Home (has binding)</button>
      <button type="button" onclick="App.router.set('current', 'main')">Main</button>
      <button type="button" onclick="App.router.set('current', 'accounts/5')">Account</button>
      <br />
      <button type="button" onclick="App.model.set('value', 'new value')">Set Binding</button>
    </script>

JavaScript

// routing code
window.EmberRouting = {};

EmberRouting.View = Ember.View.extend({
  render: function(buffer) {
    var view = this.getPath("router.currentView");
    view.renderToBuffer(buffer);
  },

  updateContentView: function() {
    this.rerender();
  }.observes("router.currentView")
});

EmberRouting.Router = Ember.Object.extend({
  notFoundView: Ember.View.create({
    template: function() {
      return "Page not found";
    }
  }),

  current: "main",

  currentView: function() {
    var route = this.routeForPath(this.get("current"));

    return route ? route.call(this) : this.get("notFoundView");
  }.property("current", "routes").cacheable(),

  routeForPath: function(path) {
    var routes = this.get("mappedRoutes"),
        route = routes.find(function(item) { return item.expression.test(path); })
        self = this;

    var wrapper = function() {
      return route.route.call(this, {id: "test"}); // no real params yeth, will be implemented later
    };

    return route ? wrapper : null;
  },

  mappedRoutes: function() {
    var mapped = [], routes = this.get("routes"), path, route, matcher;

    for (path in routes) {
      route = routes[path];
      matcher = this.matcherForRoute(path);

      mapped.push({expression: matcher.expression, route: route, params: matcher.params, originalPath: path});
    }

    return mapped;
  }.property("routes").cacheable(),

  matcherForRoute: function (path) {
    var parts = path.split("/"),
        expression = new RegExp(path.replace(/:[^\/]+/g, "(.+?)")),
        params = [];

    return {expression: expression, params: params};
  }
});

// sample app code

window.App = Ember.Application.create();

App.SampleView = Ember.View.extend({
  value: "a",
  templateName: "sample"
});

App.router = EmberRouting.Router.create({
  routes: {
    "home": function() {
      return App.SampleView.create({valueBinding: "App.model.value"});
    },

    "main": function() {
      return App.SampleView.create({value:...