Skip to content

Instantly share code, notes, and snippets.

@bttf

bttf/index.html

Created December 30, 2014 16:23
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 bttf/4e63650a4211c0cb45e2 to your computer and use it in GitHub Desktop.
Save bttf/4e63650a4211c0cb45e2 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit // source http://emberjs.jsbin.com/lanuxazixu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script src="https://cdn.firebase.com/libs/emberfire/1.3.1/emberfire.min.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Campfire Friends</h2>
Select a campfire:
{{#each campfire in controller}}
{{#unless campfire.isNew}}
{{#link-to 'campfire' campfire}}{{campfire.name}}{{/link-to}}
{{/unless}}
{{/each}}
<form>
{{input type='text' value=model.newCampfire.name placeholder='New campfire'}}
<input type='submit' value='save' {{action 'saveNewCampfire'}}>
</form>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="campfire">
<h1>campfire name: {{name}}</h1>
{{#if friends}}
<h3>friends:</h3>
<ul>
{{#each friend in friends}}
<li>{{friend.name}} - <a href='#' {{action 'deleteFriend' friend}}>delete</a></li>
{{/each}}
</ul>
{{else}}
<h3>No friends</h3>
{{/if}}
<br>
{{#if pendingFriends}}
<h3>Pending friend requests</h3>
<ul>
{{#each friend in pendingFriends}}
<li>{{friend.name}} - <a href='#' {{action 'acceptFriend' friend}}>accept</a></li>
{{/each}}
</ul>
{{/if}}
<br>
<h4>Add friends:</h4>
<ul>
{{#each friend in model.possibleFriends}}
<a href='#' {{action 'addFriend' friend}}>{{friend.name}}</a>
{{/each}}
</ul>
<br>
{{requestSent}}
</script>
<script id="jsbin-javascript">
var attr = DS.attr,
hasMany = DS.hasMany;
App = Ember.Application.create();
App.Router.map(function() {
this.route('campfire', { path: '/campfire/:campfire_id' });
});
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://emberjsbin.firebaseio.com/')
});
App.CampfireModel = DS.Model.extend({
name: attr('string'),
friends: hasMany('campfire', { inverse: 'friends', async: true }),
pendingFriends: hasMany('campfire', { inverse: null, async: true })
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return this.get('store').find('campfire');
},
afterModel: function(model, controller) {
model.set('newCampfire', this.get('store').createRecord('campfire'));
}
});
App.ApplicationController = Ember.ArrayController.extend({
actions: {
saveNewCampfire: function() {
var _this = this;
this.get('model.newCampfire').save().then(function() {
_this.set('model.newCampfire', _this.get('store').createRecord('campfire'));
});
}
}
});
App.CampfireRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('campfire', params.campfire_id);
},
afterModel: function(model, controller) {
model.set('possibleFriends', this.get('store').find('campfire'));
}
});
App.CampfireController = Ember.ObjectController.extend({
actions: {
addFriend: function(friend) {
var campfire = this.get('model');
friend.get('pendingFriends').then(function(pFriends) {
pFriends.addObject(campfire);
friend.save().then(function() {
campfire.set('requestSent', 'Friend request sent to ' + friend.get('name'));
console.log('%s added to %s pendingFriends', campfire.get('name'), friend.get('name'));
});
});
},
acceptFriend: function(friend) {
var campfire = this.get('model');
// add friend to campfires friends
campfire.get('friends').then(function(friends) {
friends.addObject(friend);
campfire.save().then(function() {
console.log('%s added to %s friends', friend.get('name'), campfire.get('name'));
});
});
// add campfire to friend's friends
friend.get('friends').then(function(friends) {
friends.addObject(campfire);
friend.save().then(function() {
console.log('%s added to %s friends', campfire.get('name'), friend.get('name'));
});
});
// remove friend from pending friends
campfire.get('pendingFriends').then(function(pFriends) {
pFriends.removeObject(friend);
campfire.save().then(function() {
console.log('%s removed from %s pendingFriends', friend.get('name'), campfire.get('name'));
});
});
},
deleteFriend: function(friend) {
var campfire = this.get('model');
campfire.get('friends').then(function(friends) {
friends.removeObject(friend);
campfire.save().then(function() {
console.log('%s removed from %s friends', friend.get('name'), campfire.get('name'));
});
});
friend.get('friends').then(function(friends) {
friends.removeObject(campfire);
friend.save().then(function() {
console.log('%s removed from %s friends', campfire.get('name'), friend.get('name'));
});
});
}
}
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//cdn.firebase.com/js/client/2.0.2/firebase.js"><\/script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"><\/script>
<script src="http://builds.emberjs.com/canary/ember-data.js"><\/script>
<script src="https://cdn.firebase.com/libs/emberfire/1.3.1/emberfire.min.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Campfire Friends</h2>
Select a campfire:
{{#each campfire in controller}}
{{#unless campfire.isNew}}
{{#link-to 'campfire' campfire}}{{campfire.name}}{{/link-to}}
{{/unless}}
{{/each}}
<form>
{{input type='text' value=model.newCampfire.name placeholder='New campfire'}}
<input type='submit' value='save' {{action 'saveNewCampfire'}}>
</form>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="campfire">
<h1>campfire name: {{name}}</h1>
{{#if friends}}
<h3>friends:</h3>
<ul>
{{#each friend in friends}}
<li>{{friend.name}} - <a href='#' {{action 'deleteFriend' friend}}>delete</a></li>
{{/each}}
</ul>
{{else}}
<h3>No friends</h3>
{{/if}}
<br>
{{#if pendingFriends}}
<h3>Pending friend requests</h3>
<ul>
{{#each friend in pendingFriends}}
<li>{{friend.name}} - <a href='#' {{action 'acceptFriend' friend}}>accept</a></li>
{{/each}}
</ul>
{{/if}}
<br>
<h4>Add friends:</h4>
<ul>
{{#each friend in model.possibleFriends}}
<a href='#' {{action 'addFriend' friend}}>{{friend.name}}</a>
{{/each}}
</ul>
<br>
{{requestSent}}
<\/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 attr = DS.attr,
hasMany = DS.hasMany;
App = Ember.Application.create();
App.Router.map(function() {
this.route('campfire', { path: '/campfire/:campfire_id' });
});
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://emberjsbin.firebaseio.com/')
});
App.CampfireModel = DS.Model.extend({
name: attr('string'),
friends: hasMany('campfire', { inverse: 'friends', async: true }),
pendingFriends: hasMany('campfire', { inverse: null, async: true })
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return this.get('store').find('campfire');
},
afterModel: function(model, controller) {
model.set('newCampfire', this.get('store').createRecord('campfire'));
}
});
App.ApplicationController = Ember.ArrayController.extend({
actions: {
saveNewCampfire: function() {
var _this = this;
this.get('model.newCampfire').save().then(function() {
_this.set('model.newCampfire', _this.get('store').createRecord('campfire'));
});
}
}
});
App.CampfireRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('campfire', params.campfire_id);
},
afterModel: function(model, controller) {
model.set('possibleFriends', this.get('store').find('campfire'));
}
});
App.CampfireController = Ember.ObjectController.extend({
actions: {
addFriend: function(friend) {
var campfire = this.get('model');
friend.get('pendingFriends').then(function(pFriends) {
pFriends.addObject(campfire);
friend.save().then(function() {
campfire.set('requestSent', 'Friend request sent to ' + friend.get('name'));
console.log('%s added to %s pendingFriends', campfire.get('name'), friend.get('name'));
});
});
},
acceptFriend: function(friend) {
var campfire = this.get('model');
// add friend to campfires friends
campfire.get('friends').then(function(friends) {
friends.addObject(friend);
campfire.save().then(function() {
console.log('%s added to %s friends', friend.get('name'), campfire.get('name'));
});
});
// add campfire to friend's friends
friend.get('friends').then(function(friends) {
friends.addObject(campfire);
friend.save().then(function() {
console.log('%s added to %s friends', campfire.get('name'), friend.get('name'));
});
});
// remove friend from pending friends
campfire.get('pendingFriends').then(function(pFriends) {
pFriends.removeObject(friend);
campfire.save().then(function() {
console.log('%s removed from %s pendingFriends', friend.get('name'), campfire.get('name'));
});
});
},
deleteFriend: function(friend) {
var campfire = this.get('model');
campfire.get('friends').then(function(friends) {
friends.removeObject(friend);
campfire.save().then(function() {
console.log('%s removed from %s friends', friend.get('name'), campfire.get('name'));
});
});
friend.get('friends').then(function(friends) {
friends.removeObject(campfire);
friend.save().then(function() {
console.log('%s removed from %s friends', campfire.get('name'), friend.get('name'));
});
});
}
}
});
</script></body>
</html>
Raw
jsbin.lanuxazixu.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.lanuxazixu.js
var attr = DS.attr,
hasMany = DS.hasMany;
App = Ember.Application.create();
App.Router.map(function() {
this.route('campfire', { path: '/campfire/:campfire_id' });
});
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://emberjsbin.firebaseio.com/')
});
App.CampfireModel = DS.Model.extend({
name: attr('string'),
friends: hasMany('campfire', { inverse: 'friends', async: true }),
pendingFriends: hasMany('campfire', { inverse: null, async: true })
});
App.ApplicationRoute = Ember.Route.extend({
model: function() {
return this.get('store').find('campfire');
},
afterModel: function(model, controller) {
model.set('newCampfire', this.get('store').createRecord('campfire'));
}
});
App.ApplicationController = Ember.ArrayController.extend({
actions: {
saveNewCampfire: function() {
var _this = this;
this.get('model.newCampfire').save().then(function() {
_this.set('model.newCampfire', _this.get('store').createRecord('campfire'));
});
}
}
});
App.CampfireRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('campfire', params.campfire_id);
},
afterModel: function(model, controller) {
model.set('possibleFriends', this.get('store').find('campfire'));
}
});
App.CampfireController = Ember.ObjectController.extend({
actions: {
addFriend: function(friend) {
var campfire = this.get('model');
friend.get('pendingFriends').then(function(pFriends) {
pFriends.addObject(campfire);
friend.save().then(function() {
campfire.set('requestSent', 'Friend request sent to ' + friend.get('name'));
console.log('%s added to %s pendingFriends', campfire.get('name'), friend.get('name'));
});
});
},
acceptFriend: function(friend) {
var campfire = this.get('model');
// add friend to campfires friends
campfire.get('friends').then(function(friends) {
friends.addObject(friend);
campfire.save().then(function() {
console.log('%s added to %s friends', friend.get('name'), campfire.get('name'));
});
});
// add campfire to friend's friends
friend.get('friends').then(function(friends) {
friends.addObject(campfire);
friend.save().then(function() {
console.log('%s added to %s friends', campfire.get('name'), friend.get('name'));
});
});
// remove friend from pending friends
campfire.get('pendingFriends').then(function(pFriends) {
pFriends.removeObject(friend);
campfire.save().then(function() {
console.log('%s removed from %s pendingFriends', friend.get('name'), campfire.get('name'));
});
});
},
deleteFriend: function(friend) {
var campfire = this.get('model');
campfire.get('friends').then(function(friends) {
friends.removeObject(friend);
campfire.save().then(function() {
console.log('%s removed from %s friends', friend.get('name'), campfire.get('name'));
});
});
friend.get('friends').then(function(friends) {
friends.removeObject(campfire);
friend.save().then(function() {
console.log('%s removed from %s friends', campfire.get('name'), friend.get('name'));
});
});
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment