Skip to content

Instantly share code, notes, and snippets.

@cmosguy

cmosguy/jsbin.xikepe.css

Created July 12, 2014 14:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cmosguy/489df33207a6e3a6d39f to your computer and use it in GitHub Desktop.
Save cmosguy/489df33207a6e3a6d39f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.xikepe.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.xikepe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Games</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{ render "foo" }}
{{ render "game" }}
</script>
<script type="text/x-handlebars" data-template-name="foo">
<table>
<thead>
<tr>
{{#view App.HeaderCellView}}
{{view.num}}
{{/view}}
</tr>
</thead>
<tbody>
<tr>
{{#view App.UserCellView}}
click here {{view.user}}
{{/view}}
</tr>
</tbody>
</table>
</script>
<script type="text/x-handlebars" data-template-name="foo-header-cell">
<th>
{{view.num}}
</th>
</script>
<script type="text/x-handlebars" data-template-name="foo-user-cell">
<td>
{{view.user}}
</td>
</script>
<script type="text/x-handlebars" data-template-name="game">
<ul>
<li>{{game}}</li>
<li>home score:{{home_score}}</li>
<li>away score:{{away_score}}</li>
<li>status:{{game_status}}</li>
<li>home team: {{home.abbreviation}}</li>
<li>away team: {{away.abbreviation}}</li>
{{#each linescores}}
<li>{{score}}</li>
<li>{{period_value}}</li>
<li>{{team.abbreviation}}</li>
{{/each}}
</ul>
<ul>
{{#each item in awayScores}}
<li>
{{item.score}}
</li>
{{/each}}
</ul>
Num Periods: {{numPeriods}}
{{#each item in emptyPeriods}}
<li>
--
</li>
{{/each}}
</script>
</body>
</html>
Raw
jsbin.xikepe.js
var store;
var gameId = 1613;
App = Ember.Application.create();
App.ApplicationRoute = Ember.Route.extend({
setupController: function() {
var store = this.store;
var gameController = this.controllerFor('game');
var fooController = this.controllerFor('foo');
this.store.find('game', '1613').then(function(game) {
gameController.set('model', game);
Ember.run.later(function(){
//store.pushPayload('game',data);
}, 3000);
});
}
});
App.Game = DS.Model.extend({
title: DS.attr('string'),
away_score: DS.attr(),
home_score: DS.attr(),
gameclock: DS.attr("string"),
game: DS.attr("string"),
game_status: DS.attr("string"),
home: DS.belongsTo('team', { embedded: true }),
away: DS.belongsTo('team', { embedded: true }),
linescores: DS.hasMany('linescore')
});
App.Team = DS.Model.extend({
abbreviation: DS.attr("string"),
team: DS.attr("string"),
conference: DS.attr("string"),
games: DS.hasMany('game')
});
App.Linescore = DS.Model.extend({
period_value: DS.attr(),
period_name: DS.attr("string"),
score: DS.attr(),
game: DS.belongsTo('game'),
team: DS.belongsTo('team')
});
App.GameController = Ember.ObjectController.extend({
test: "test this",
awayScores: function () {
var away = this.get('away.abbreviation');
var home = this.get('home.abbreviation');
var linescores = this.get('linescores');
if (!linescores) {
return [];
}
var awayScores = linescores.filter(function (linescore) {
return linescore.get('team.abbreviation') == away;
});
return awayScores;
}.property('away.abbreviation', 'home.abbreviation', 'linescores.@each'),
homeScores: function () {
var home = this.get('home.abbreviation');
var linescores = this.get('linescores');
if (!linescores) {
return [];
}
var homeScores = linescores.filter(function (linescore) {
return linescore.get('team.abbreviation') == home;
});
return homeScores;
}.property('home.abbreviation', 'linescors.@each'),
numPeriods : function(){
return this.get('awayScores.length');
}.property('awayScores.length'),
emptyPeriods : function() {
var emptyPeriods = [];
var periodsRemaining = 4 - this.get('numPeriods');
if (periodsRemaining > 0){
for (var i = 1; i <= periodsRemaining; i++) {
emptyPeriods.push(i);
}
}
return emptyPeriods;
}.property('numPeriods')
});
App.FooController = Ember.ObjectController.extend({
test: "test",
actions: {
userClick: function(level){
console.log('user click' + level);
}
}
});
App.HeaderCellView = Ember.View.extend({
num: 44,
layoutName: "foo-header-cell"
});
App.UserCellView = Ember.View.extend({
user: 66,
layoutName: "foo-user-cell",
click: function(evt) {
this.get('controller').send('userClick', 11);
}
});
function serializeGamePayload(payload) {
var teams = payload.linked.teams;
var game = payload.game;
var linescores = payload.linked.linescores;
payload = { game: game, team: teams, linescore: linescores };
return payload;
}
App.GameSerializer = DS.RESTSerializer.extend({
pushPayload: function (store, payload) {
payload = serializeGamePayload(payload);
return this._super(store, payload);
},
extractSingle: function (store, type, payload, id, requestType) {
payload = serializeGamePayload(payload);
return this._super(store, type, payload, id, requestType);
}
});
$.mockjax({
url: '/games/1613',
responseText:
{
"game": {
"id": "1613",
"game": "Miami Heat vs. San Antonio Spurs (Finals - Game1)",
"season": "2013-14",
"home": 60,
"away": 49,
"away_score": 45,
"home_score": 35,
"week": 0,
"tv": "ABC",
"game_datetime_utc": {
"date": "2014-06-06 01:00:00",
"timezone_type": 3,
"timezone": "UTC"
},
"game_type": "postseason",
"game_status": "live",
"gameclock": "35:42",
"linescores": [
"17",
"18",
"19",
"20",
"21",
"22"
]
},
"linked": {
"linescores": [{
"id": "17",
"period_value": "1",
"period_name": "Q1",
"score": "26",
"game": "1613",
"team": "60"
}, {
"id": "18",
"period_value": "2",
"period_name": "Q2",
"score": "28",
"game": "1613",
"team": "60"
}, {
"id": "19",
"period_value": "3",
"period_name": "Q3",
"score": "4",
"game": "1613",
"team": "60"
}, {
"id": "20",
"period_value": "1",
"period_name": "Q1",
"score": "20",
"game": "1613",
"team": "49"
}, {
"id": "21",
"period_value": "2",
"period_name": "Q2",
"score": "29",
"game": "1613",
"team": "49"
}, {
"id": "22",
"period_value": "3",
"period_name": "Q3",
"score": "8",
"game": "1613",
"team": "49"
}],
"teams": [{
"id": "49",
"abbreviation": "MIA",
"conference": "Eastern",
"division": "Southeast",
"city": "",
"state": ""
}, {
"id": "60",
"abbreviation": "SAS",
"conference": "Western",
"division": "Southwest",
"city": "",
"state": ""
}]
}
}
});
var data = {
"game":[
{
"id":"1613",
"sport_id":"2",
"league_id":"3",
"season":"2013-14",
"game":"Miami Heat vs. San Antonio Spurs (Finals - Game1)",
"home":{
"id":"60",
"team":"San Antonio Spurs",
"abbreviation":"SAS",
"conference":"Western",
"division":"Southwest",
"city":"",
"state":"",
"created_at":"2014-06-18 22:39:25",
"updated_at":"2014-06-18 22:39:25",
"sport_id":"2"
},
"away":{
"id":"49",
"team":"Miami Heat",
"abbreviation":"MIA",
"conference":"Eastern",
"division":"Southeast",
"city":"",
"state":"",
"created_at":"2014-06-18 22:39:25",
"updated_at":"2014-06-18 22:39:25",
"sport_id":"2"
},
"home_score":47,
"away_score":57,
"bye":"0",
"week":"0",
"tv":"ABC",
"game_datetime_utc":"2014-06-06 01:00:00",
"game_type":"postseason",
"game_status":"live",
"created_at":"2014-06-18 22:39:44",
"updated_at":{
"date":"2014-06-20 17:47:27",
"timezone_type":3,
"timezone":"UTC"
},
"gameclock":"47:27",
"sport":{
"id":"2",
"sport":"BASKETBALL",
"created_at":"2014-06-18 22:39:25",
"updated_at":"2014-06-18 22:39:25"
},
"league":{
"id":"3",
"league":"NBA",
"created_at":"2014-06-18 22:39:25",
"updated_at":"2014-06-18 22:39:25"
},
"linescores":[
{
"id":"35",
"game_id":"1613",
"team_id":"60",
"period_value":"1",
"period_name":"Q1",
"score":"26",
"created_at":"2014-06-18 23:10:50",
"updated_at":"2014-06-18 23:10:50"
},
{
"id":"36",
"game_id":"1613",
"team_id":"60",
"period_value":"2",
"period_name":"Q2",
"score":"28",
"created_at":"2014-06-18 23:10:50",
"updated_at":"2014-06-18 23:10:50"
},
{
"id":"37",
"game_id":"1613",
"team_id":"60",
"period_value":"3",
"period_name":"Q3",
"score":"21",
"created_at":"2014-06-18 23:10:50",
"updated_at":"2014-06-18 23:10:50"
},
{
"id":"38",
"game_id":"1613",
"team_id":"49",
"period_value":"1",
"period_name":"Q1",
"score":"33",
"created_at":"2014-06-18 23:10:50",
"updated_at":"2014-06-18 23:10:50"
},
{
"id":"39",
"game_id":"1613",
"team_id":"49",
"period_value":"2",
"period_name":"Q2",
"score":"45",
"created_at":"2014-06-18 23:10:50",
"updated_at":"2014-06-18 23:10:50"
},
{
"id":"40",
"game_id":"1613",
"team_id":"49",
"period_value":"3",
"period_name":"Q3",
"score":"55",
"created_at":"2014-06-18 23:10:50",
"updated_at":"2014-06-18 23:10:50"
}
]
}
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment