ZogStriP/ember.js-planning.html

## ember.js-planning.html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
  </head>
  <body>
    <script type="text/x-handlebars">
      {{outlet}}
    </script>
    <script type="text/x-handlebars" id="planning">
      <button {{action "previousMonth"}}>PREVIOUS</button>{{year}} {{month}}<button {{action "nextMonth"}}>NEXT</button>
    </script>
    <script>
      App = Ember.Application.create();

      App.Router.map(function() {
        this.route("today", { path: "planning" });
        this.route("planning", { path: "planning/:year/:month" });
      });

      App.TodayRoute = Ember.Route.extend({
        model: function() {
          return App.Planning.create({date: new Date()});
        },
        redirect: function(model) {
          this.transitionTo("planning", model);
        }
      });

      App.PlanningRoute = Ember.Route.extend({
        model: function(params) {
          return App.Planning.create({date: new Date(params.year, params.month - 1, 1)});
        },
        serialize: function(model) {
          return {
            year: model.date.getFullYear(),
            month: model.date.getMonth() + 1
          };
        }
      });

      App.PlanningController = Ember.ObjectController.extend({
        previousMonth: function() {
          var date = new Date(this.get("date"));
          date.setMonth(date.getMonth() - 1);
          this.set("date", date);
          // HACK
          App.URL.update(["planning", this.get("year"), this.get("month")].join("/"));
        },
        nextMonth: function() {
          var date = new Date(this.get("date"));
          date.setMonth(date.getMonth() + 1);
          this.set("date", date);
          // HACK
          App.URL.update(["planning", this.get("year"), this.get("month")].join("/"));
        }
      });

      App.Planning = Ember.Object.extend({
        month: function() {
          return this.get("date").getMonth() + 1;
        }.property("date"),
        year: function() {
          return this.get("date").getFullYear();
        }.property("date")
      });

      App.URL = {
        router: function() {
          return App.__container__.lookup('router:main');
        },
        update: function(path) {
          App.URL.router().get("location").setURL(path);
        }
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
	</head>
	<body>
	<script type="text/x-handlebars">
	{{outlet}}
	</script>
	<script type="text/x-handlebars" id="planning">
	<button {{action "previousMonth"}}>PREVIOUS</button>{{year}} {{month}}<button {{action "nextMonth"}}>NEXT</button>
	</script>
	<script>
	App = Ember.Application.create();

	App.Router.map(function() {
	this.route("today", { path: "planning" });
	this.route("planning", { path: "planning/:year/:month" });
	});

	App.TodayRoute = Ember.Route.extend({
	model: function() {
	return App.Planning.create({date: new Date()});
	},
	redirect: function(model) {
	this.transitionTo("planning", model);
	}
	});

	App.PlanningRoute = Ember.Route.extend({
	model: function(params) {
	return App.Planning.create({date: new Date(params.year, params.month - 1, 1)});
	},
	serialize: function(model) {
	return {
	year: model.date.getFullYear(),
	month: model.date.getMonth() + 1
	};
	}
	});

	App.PlanningController = Ember.ObjectController.extend({
	previousMonth: function() {
	var date = new Date(this.get("date"));
	date.setMonth(date.getMonth() - 1);
	this.set("date", date);
	// HACK
	App.URL.update(["planning", this.get("year"), this.get("month")].join("/"));
	},
	nextMonth: function() {
	var date = new Date(this.get("date"));
	date.setMonth(date.getMonth() + 1);
	this.set("date", date);
	// HACK
	App.URL.update(["planning", this.get("year"), this.get("month")].join("/"));
	}
	});

	App.Planning = Ember.Object.extend({
	month: function() {
	return this.get("date").getMonth() + 1;
	}.property("date"),
	year: function() {
	return this.get("date").getFullYear();
	}.property("date")
	});

	App.URL = {
	router: function() {
	return App.__container__.lookup('router:main');
	},
	update: function(path) {
	App.URL.router().get("location").setURL(path);
	}
	}
	</script>
	</body>
	</html>