Skip to content

Instantly share code, notes, and snippets.

@outaTiME

outaTiME/index.html

Created September 12, 2014 18:01
Show Gist options
  • Save outaTiME/6a4f50d97bfbe04dd317 to your computer and use it in GitHub Desktop.
Save outaTiME/6a4f50d97bfbe04dd317 to your computer and use it in GitHub Desktop.
Download ZIP
Emberfire hasMany test // source http://emberjs.jsbin.com/zaqeso/25
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Emberfire hasMany test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<!-- Ember + Ember Data -->
<script src="http://builds.emberjs.com/release/ember.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<!-- EmberFire -->
<script src="https://cdn.firebase.com/libs/emberfire/1.1.3/emberfire.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Emberfire hasMany test</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<button type="button" class="btn btn-primary btn-block" {{action 'addRemoteDevice'}} style="margin-bottom: 15px;">Add remote device</button>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th nowrap>Creation Date</th>
</tr>
</thead>
<tbody>
{{#each controller}}
<tr>
<td width="100%">
{{name}}
</td>
<td nowrap>{{created_on}}</td>
</tr>
{{else}}
<tr>
<td colspan="2">No devices are available</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>
<script id="jsbin-javascript">
var App = Ember.Application.create();
var firebaseRef = new Firebase('https://outatime.firebaseio.com');
var user_id = '53f52a27d5d5bc90367d9fb8';
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: firebaseRef
});
App.User = DS.Model.extend({
created_on: DS.attr('number'),
identification: DS.attr('string'),
firstname: DS.attr('string'),
lastname: DS.attr('string'),
devices: DS.hasMany('device', { async: true })
});
App.Device = DS.Model.extend({
name: DS.attr('string'),
created_on: DS.attr('number'),
user: DS.belongsTo('user', { async: true })
});
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function () {
var store = this.store;
return store.find('user', user_id).then(function (user) {
return user.get('devices').then(function (devices) {
return devices;
});
});
}
});
App.IndexController = Ember.ArrayController.extend({
sortProperties: ['created_on'],
sortAscending: false,
actions: {
addRemoteDevice: function () {
var devicesRef = firebaseRef.child('devices');
var count = this.get('model.length');
console.log('count: %s', count);
var payload = {
name: 'Test #' + (count + 1),
created_on: Date.now()
}
var device = devicesRef.push(payload, function (err) {
if (err) {
console.log('error: %o', err);
} else {
var device_name = device.name();
console.log('Device created: ' + device_name);
var userRef = firebaseRef.child('users/' + user_id);
userRef.child('devices/' + device_name).set(true, function (err) {
if (err) {
console.log('error: %o', err);
// remove created device from firebase
device.remove();
} else {
console.log('Device: ' + device_name + ' created and linked with user: ' +
user_id);
}
});
}
});
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Emberfire hasMany test</title>
<\!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<\!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"><\/script>
<\!-- Ember + Ember Data -->
<script src="http://builds.emberjs.com/release/ember.min.js"><\/script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"><\/script>
<\!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"><\/script>
<\!-- EmberFire -->
<script src="https://cdn.firebase.com/libs/emberfire/1.1.3/emberfire.min.js"><\/script>
<\!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Emberfire hasMany test</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<button type="button" class="btn btn-primary btn-block" {{action 'addRemoteDevice'}} style="margin-bottom: 15px;">Add remote device</button>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th nowrap>Creation Date</th>
</tr>
</thead>
<tbody>
{{#each controller}}
<tr>
<td width="100%">
{{name}}
</td>
<td nowrap>{{created_on}}</td>
</tr>
{{else}}
<tr>
<td colspan="2">No devices are available</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var App = Ember.Application.create();
var firebaseRef = new Firebase('https://outatime.firebaseio.com');
var user_id = '53f52a27d5d5bc90367d9fb8';
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: firebaseRef
});
App.User = DS.Model.extend({
created_on: DS.attr('number'),
identification: DS.attr('string'),
firstname: DS.attr('string'),
lastname: DS.attr('string'),
devices: DS.hasMany('device', { async: true })
});
App.Device = DS.Model.extend({
name: DS.attr('string'),
created_on: DS.attr('number'),
user: DS.belongsTo('user', { async: true })
});
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function () {
var store = this.store;
return store.find('user', user_id).then(function (user) {
return user.get('devices').then(function (devices) {
return devices;
});
});
}
});
App.IndexController = Ember.ArrayController.extend({
sortProperties: ['created_on'],
sortAscending: false,
actions: {
addRemoteDevice: function () {
var devicesRef = firebaseRef.child('devices');
var count = this.get('model.length');
console.log('count: %s', count);
var payload = {
name: 'Test #' + (count + 1),
created_on: Date.now()
}
var device = devicesRef.push(payload, function (err) {
if (err) {
console.log('error: %o', err);
} else {
var device_name = device.name();
console.log('Device created: ' + device_name);
var userRef = firebaseRef.child('users/' + user_id);
userRef.child('devices/' + device_name).set(true, function (err) {
if (err) {
console.log('error: %o', err);
// remove created device from firebase
device.remove();
} else {
console.log('Device: ' + device_name + ' created and linked with user: ' +
user_id);
}
});
}
});
}
}
});
</script></body>
</html>
Raw
jsbin.zaqeso.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.zaqeso.js
var App = Ember.Application.create();
var firebaseRef = new Firebase('https://outatime.firebaseio.com');
var user_id = '53f52a27d5d5bc90367d9fb8';
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: firebaseRef
});
App.User = DS.Model.extend({
created_on: DS.attr('number'),
identification: DS.attr('string'),
firstname: DS.attr('string'),
lastname: DS.attr('string'),
devices: DS.hasMany('device', { async: true })
});
App.Device = DS.Model.extend({
name: DS.attr('string'),
created_on: DS.attr('number'),
user: DS.belongsTo('user', { async: true })
});
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function () {
var store = this.store;
return store.find('user', user_id).then(function (user) {
return user.get('devices').then(function (devices) {
return devices;
});
});
}
});
App.IndexController = Ember.ArrayController.extend({
sortProperties: ['created_on'],
sortAscending: false,
actions: {
addRemoteDevice: function () {
var devicesRef = firebaseRef.child('devices');
var count = this.get('model.length');
console.log('count: %s', count);
var payload = {
name: 'Test #' + (count + 1),
created_on: Date.now()
}
var device = devicesRef.push(payload, function (err) {
if (err) {
console.log('error: %o', err);
} else {
var device_name = device.name();
console.log('Device created: ' + device_name);
var userRef = firebaseRef.child('users/' + user_id);
userRef.child('devices/' + device_name).set(true, function (err) {
if (err) {
console.log('error: %o', err);
// remove created device from firebase
device.remove();
} else {
console.log('Device: ' + device_name + ' created and linked with user: ' +
user_id);
}
});
}
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment