Em Nested Tabs Component Test

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <ul>
        <li>{{#link-to 'film'}}Film{{/link-to}}</li>
        <li>{{#link-to 'tv'}}TV{{/link-to}}</li>
        <li>{{#link-to 'music'}}Music{{/link-to}}</li>
    </ul>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <h1>Index</h1>
    {{nested-comp callTo="tabClick"}}
    <div class="moduleContainer">
        {{tab-selectors}}
        <hr/>
        {{nested-tab-module}}
    </div>
</script>    
<script type="text/x-handlebars" data-template-name="film">
    <h1>Film</h1>
</script>
<script type="text/x-handlebars" data-template-name="tv">
    <h1>TV</h1>
</script>
<script type="text/x-handlebars" data-template-name="music">
    <h1>Music</h1>
</script>
<script type="text/x-handlebars" data-template-name="components/arg-goo">
    ARG!
</script>
<script type="text/x-handlebars" data-template-name="components/tab-selectors">
    <ul>
        <li {{action "tabClick" this}}>All</li>
        <li>List</li>
        <li>Horse</li>
        <li>Harness</li>
        <li>Hound</li>
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="components/tab-content">

</script>
<script type="text/x-handlebars" data-template-name="components/n2gTable">

</script>
<script type="text/x-handlebars" data-template-name="components/nested-comp">
    {{part-one}}
    {{part-two}}
</script>
<script type="text/x-handlebars" data-template-name="components/part-one">
    <div {{action "flerp" target="parentView"}}>part one</div>
</script>

<script...

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 2px;
    padding-right: 2px;
    display: inline-block;
}
.scroll-wrap {
    overflow: hidden;
    max-width: 80%;
    max-height: 90px;
}
.content {
    display: inline-block;
}
.content ul {
    width: 200px;
}
.content ul li {
    display:block;
    background-color: rgba(0,0,0,.2);
    padding-top: 4px;
    padding-bottom: 4px;
    border: solid 1px gray;
}

.moduleContainer {
    border-radius: 5px;
    background-color: #ededed;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

// events are sorted by event time
var n2j_racing =  {
   events: [
       {
         category_id: "71",
         subcategory_id: "1922",
         sub_region: "WA",
         subcategory_name: "ASCOT",
         distance: "-",
         event_id: "747980",
         event_status: 3,
         event_datetime: "2013-10-22 12:30:00",
         localevent_datetime: "2013-10-22 12:30:00",
         event_timezone: "",
         event_name: "1:2M 1F NOVICE HURDLE",
         market_id: "3701259",
         race_num: "1",
         market_status: 3,
           //
         selections: [
            {
               market_selection_id: "342709",
               position: "1",
               status: "0",
               name: "SELECTION_1_1",
               barrier: "3",
               product_id: 84,
               product_name: "LuxDiv",
               bet_type_name: "Win",
               market_price_id: "83362315",
               bet_type_id: 1,
               price: "6.50000000",
               display_price: true
            },
            {
               market_selection_id: "342710",
               position: "2",
               status: "0",
               name: "SELECTION_1_2",
               barrier: "3",
               product_id: 85,
               product_name: "LuxDiv",
               bet_type_name: "Win",
               market_price_id: "83362316",
               bet_type_id: 1,
               price: "7.50000000",
               display_price: true
            },
            {
               market_selection_id: "342711",
               position: "3",
               status: "0",
               name: "SELECTION_1_3",
               barrier: "5",
               product_id: 86,
               product_name: "LuxDiv",
               bet_type_name: "Win",
               market_price_id: "83362317",
               bet_type_id: 1,
               price: "8.50000000",
               display_price: true
            }
         ]
      }
   ],
   next_start: 6
};




App =...