Ember Food And drink routes

by amindunited

HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
 <script src="//builds.emberjs.com/handlebars-1.0.0.js"></script>
 <script src="//builds.emberjs.com/tags/v1.1.2/ember.js"></script>
 <script src="//builds.emberjs.com/tags/v1.0.0-beta.3/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{#link-to "food"}}Goto Food{{/link-to}}
    {{#link-to "drink"}}Goto Drink{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="food">
    <h2>PHOOD</h2>
    {{#link-to "food.foodcategories"}}Goto Food Categories{{/link-to}}
    {{#link-to "index"}}Go Back{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="drink">
    <h2>Drink</h2>
    
    {{#link-to "drink.drinkcategories"}}Goto Drink Categories{{/link-to}}
    
    {{#link-to "index"}}Go Back{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="drink/drinkcategories">
    <h2>Drink categories</h2>
    {{#link-to "drink.reds"}}Goto Reds{{/link-to}}
    {{#link-to "drink.whites"}}Goto Whites{{/link-to}}
    {{#link-to "drink"}}Go Back{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="food/foodcategories">
    {{log this}}
    <h2>Food Categories</h2>
    {{#link-to "food.bread"}}Goto Breads{{/link-to}}
    {{#link-to "food.dips"}}Goto Dips{{/link-to}}
    {{#link-to "food"}}Go Back{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="drink/reds">
    <h2>Reds</h2>
    {{#link-to "drink.drinkcategories"}}Go Back{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="drink/whites">
    <h2>Whites</h2>
    {{#link-to "drink.drinkcategories"}}Go Back{{/link-to}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="food/bread">
    <h2>Bread</h2>
    {{#link-to "food.foodcategories"}}Go Back{{/link-to}}
   ...

JavaScript

App = Em.Application.create();

App.Router.map(function(){
    this.resource('food', {path:'/food'}, function(){
        this.route('foodcategories', {path:'/food/categories'});
        this.route('bread', {path:'/food/bread'});
        this.route('dips', {path:'/food/dips'});
        
    });
    this.resource('drink', {path:'/drink'}, function(){
        this.route('drinkcategories', {path:'/drink/categories'});
        this.route('reds', {path:'/drink/reds'});
        this.route('whites', {path:'/drink/whites'});
    });

});

App.CategoryView = Em.View.extend({
    didInsertElement: function(){
        console.log("This is a category View", this);
    }
});

App.FoodFoodcategoriesView = App.CategoryView.extend({
    templateName:"food/foodcategories",
    classNames: ['fooood']
});

App.DrinkDrinkcategoriesView = App.CategoryView.extend({
    templateName:"drink/drinkcategories",
    classNames: ['drink']
});

$('#findButton').click(function(){
    console.log($('.fooood').length);
})