Ember Path Browser

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{render location}}
</script>

<script type="text/x-handlebars" data-template-name="location">
    <h1>Path</h1>
    <ul>
    {{#each elm in controller.content}}
    <li><a {{action goto elm target="controller"}}>{{elm.name}}</a></li>
    {{/each}}
    <li><a {{action goBack elm target="controller"}}> <= </a></li>
    <li><a {{action goForward elm target="controller"}}> => </a></li>
    </ul>
</script>

CSS

html, body {
    font-size: 9pt;
}
h1 {
    font-size: 18pt;
}
h2 {
    font-size: 12pt;
}
.location ul { list-style-type: none; }
.location ul li { 
    list-style-type: none; 
    display: inline-block;
    margin: 0;
    padding:0 10px 0 10px;
    border: solid 1px gray;
    border-right:none;
}

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();

App.Router.map(function () {
    this.resource("index", {path:"/"}, function(){
        this.resource('category', {path:"/cat/:cat_id"}, function(){
            this.resource('subCategory', {path:"/sub/:sub_id"}, function(){
            
            })
        }) 
    });
});

App.IndexRoute = Em.Route.extend({
    renderTemplate: function(){
    }
});
App.LocationBarRoute = Em.Route.extend({
    renderTemplate: function(){
        
    }
});
App.Location = Em.Object.create({
    content: [],
    path: "/",
    previousPaths: [],
    nextPaths: []
});
App.LocationController = Em.Controller.extend({
    contentBinding: "App.Location.content",
    pathBinding: "App.Location.path",
    previousPathsBinding: "App.Location.previousPaths",
    nextPathsBinding: "App.Location.nextPaths",
    pathChange: function(){
        this.get('previousPaths').push(this.get('path'))
        console.log("previousPaths updated: ", this.get('previousPaths'));
    }.observesBefore('this.path'),
    pathListener: function(){
        console.log("this path is", this.get('path'));
        var paths = this.get('path').split("/");
        if (paths[0] == "") {
            paths.splice(0, 1);
        }
        console.log("paths", paths);
        this.get('content').clear();
        var prevPath = "";
        for (var i = 0; i < paths.length; i++) {
            prevPath += "/" + paths[i];
            var pathObj = {};
            pathObj.name = paths[i];
            pathObj.path = prevPath;
            this.get('content').pushObject(pathObj);
        }
        console.log("New Location Content ", this.get('content'));
        
    }.observes("this.path"),
    init: function(){
        console.log("locationcontroller init'd ", this.get('path'));
    },
     goto: function(context){
        console.log("we should goto ", context.path);
       ...