Phil Lackey phillipkregg

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

In this article, I'll walk through a basic Rails (3.2.x) setup for creating a nested resource for two models. Nested resources work well when you want to build out URL structure between two related models, and still maintain a RESTful convention. This code assumes you are running RVM to manage Ruby/Gem versions, and Git for version control.

Creating a new Rails project

$ mkdir family # create rvm gemset 
$ echo "rvm use --create ruby-1.9.2@family" > family/.rvmrc 
$ cd family # install rails 
$ gem install rails # create new rails project 
$ rails new . # version control

	import Ember from 'ember';

	export default Ember.Component.extend({
	movieService: Ember.inject.service('movie-displayer-service'),
	currentSelectedMovie: '',

	didInsertElement: function() {
	// When the component is inserted into the DOM tree, use the model to set
	// the 'currentSelectedMovie' property.
	this.set('currentSelectedMovie', this.get('model').currentSelectedMovie);

	import Ember from 'ember';

	export default Ember.Component.extend({
	didInsertElement: function() {
	// any JS inits that need to happen
	// universally can be called here.
	//
	// For example if you need to register
	// bootstrap dropdowns, you can do something
	// like $('.dropdown-toggle').dropdown()

	import Ember from 'ember';

	export default Ember.Component.extend({
	// Here is where the injection of the service happens.
	// Ember.inject.service takes an argument that is the name of the
	// file of the service that you created.
	// If your variable name matches the service name, you would not
	// need to add the argument at all.
	// For example: shopping-cart: Ember.inject.service()
	cart: Ember.inject.service('shopping-cart'),

	import Ember from 'ember';

	export default Ember.Component.extend({
	changedElement: Ember.observer('changeTest', function() {
	alert('changed');
	})

	});

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle'
	});

	import Ember from 'ember';

	export default Ember.Component.extend({

	myInputValue: '',

	actions: {
	fromComponent: function() {
	var message = this.get('myInputValue');
	debugger;

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName: 'Ember Twiddle',

	actions: {
	goHome: function() {
	this.transitionToRoute('index');
	},
	goToHotels: function() {

	import Ember from 'ember';

	export default Ember.Component.extend({
	property1: undefined,
	property2: undefined,

	actions: {
	coolClick: function() {
	this.set('property1', 'Yo');
	this.set('property2', 'Sup');