Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 7, 2014 23:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/b385b98b970c8f37840b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/b385b98b970c8f37840b to your computer and use it in GitHub Desktop.
Download ZIP
Ember Table Starter Kit Ember-Table Starter Kit // source http://emberjs.jsbin.com/yugunokace
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember-Table Starter Kit" />
<meta charset="utf-8">
<title>Ember Table Starter Kit</title>
<!-- Note that you need antiscroll CSS to support ember-table -->
<link rel="stylesheet" href="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://rawgit.com/Addepar/ember-table/v0.2.3/dist/ember-table.css">
<!-- Ember and dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"></script>
<!-- Ember Table and dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.3/dependencies/ember-addepar-mixins/resize_handler.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.3/dependencies/ember-addepar-mixins/style_bindings.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.3/dist/ember-table.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
.table-container {
height: 500px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2> Welcome to Ember Table!</h2>
<p>Version 0.2.3</p>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="table-container">
{{table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"
}}
</div>
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
controllerName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
numRows: 100,
columns: function() {
var dateColumn, openColumn, highColumn, lowColumn, closeColumn;
dateColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 150,
textAlign: 'text-align-left',
headerCellName: 'Date',
getCellContent: function(row) {
return row.get('date').toDateString();
}
});
openColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Open',
getCellContent: function(row) {
return row.get('open').toFixed(2);
}
});
highColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'High',
getCellContent: function(row) {
return row.get('high').toFixed(2);
}
});
lowColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Low',
getCellContent: function(row) {
return row.get('low').toFixed(2);
}
});
closeColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Close',
getCellContent: function(row) {
return row.get('close').toFixed(2);
}
});
return [dateColumn, openColumn, highColumn, lowColumn, closeColumn];
}.property(),
content: function() {
var generatedContent = [];
for (var i = 0; i < this.get('numRows'); i++) {
var date = new Date();
date.setDate(date.getDate() + i);
generatedContent.push({
date: date,
open: Math.random() * 100,
high: Math.random() * 100 + 50,
low: Math.random() * 100 - 50,
close: Math.random() * 100
});
}
return generatedContent;
}.property('numRows')
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember-Table Starter Kit" />
<meta charset="utf-8">
<title>Ember Table Starter Kit</title>
<\!-- Note that you need antiscroll CSS to support ember-table -->
<link rel="stylesheet" href="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://rawgit.com/Addepar/ember-table/v0.2.3/dist/ember-table.css">
<\!-- Ember and dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"><\/script>
<\!-- Ember Table and dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"><\/script>
<script src="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.js"><\/script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.3/dependencies/ember-addepar-mixins/resize_handler.js"><\/script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.3/dependencies/ember-addepar-mixins/style_bindings.js"><\/script>
<script src="http://rawgit.com/Addepar/ember-table/v0.2.3/dist/ember-table.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2> Welcome to Ember Table!</h2>
<p>Version 0.2.3</p>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<div class="table-container">
{{table-component
hasFooter=false
columnsBinding="columns"
contentBinding="content"
}}
</div>
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
.table-container {
height: 500px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
controllerName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
numRows: 100,
columns: function() {
var dateColumn, openColumn, highColumn, lowColumn, closeColumn;
dateColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 150,
textAlign: 'text-align-left',
headerCellName: 'Date',
getCellContent: function(row) {
return row.get('date').toDateString();
}
});
openColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Open',
getCellContent: function(row) {
return row.get('open').toFixed(2);
}
});
highColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'High',
getCellContent: function(row) {
return row.get('high').toFixed(2);
}
});
lowColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Low',
getCellContent: function(row) {
return row.get('low').toFixed(2);
}
});
closeColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Close',
getCellContent: function(row) {
return row.get('close').toFixed(2);
}
});
return [dateColumn, openColumn, highColumn, lowColumn, closeColumn];
}.property(),
content: function() {
var generatedContent = [];
for (var i = 0; i < this.get('numRows'); i++) {
var date = new Date();
date.setDate(date.getDate() + i);
generatedContent.push({
date: date,
open: Math.random() * 100,
high: Math.random() * 100 + 50,
low: Math.random() * 100 - 50,
close: Math.random() * 100
});
}
return generatedContent;
}.property('numRows')
});</script></body>
</html>
Raw
jsbin.yugunokace.css
/* Put your CSS here */
html, body {
margin: 20px;
}
.table-container {
height: 500px;
}
Raw
jsbin.yugunokace.js
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
controllerName: 'application'
});
App.ApplicationController = Ember.Controller.extend({
numRows: 100,
columns: function() {
var dateColumn, openColumn, highColumn, lowColumn, closeColumn;
dateColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 150,
textAlign: 'text-align-left',
headerCellName: 'Date',
getCellContent: function(row) {
return row.get('date').toDateString();
}
});
openColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Open',
getCellContent: function(row) {
return row.get('open').toFixed(2);
}
});
highColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'High',
getCellContent: function(row) {
return row.get('high').toFixed(2);
}
});
lowColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Low',
getCellContent: function(row) {
return row.get('low').toFixed(2);
}
});
closeColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Close',
getCellContent: function(row) {
return row.get('close').toFixed(2);
}
});
return [dateColumn, openColumn, highColumn, lowColumn, closeColumn];
}.property(),
content: function() {
var generatedContent = [];
for (var i = 0; i < this.get('numRows'); i++) {
var date = new Date();
date.setDate(date.getDate() + i);
generatedContent.push({
date: date,
open: Math.random() * 100,
high: Math.random() * 100 + 50,
low: Math.random() * 100 - 50,
close: Math.random() * 100
});
}
return generatedContent;
}.property('numRows')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment