kumkanillam

(This is a WIP collection of resources for first time contributors to Ember.js)

Issues for First Time Contributors

Ember

CRUD with Ember (+ Data)

Ember's official documentation describes a number of low-level APIs, but doesn't talk much about how to put them together. As a result, a simple task such as creating a simple CRUD application is not obvious to a newcomer.

This post is also on my blog, since Gist doesn't support @ notifications.

Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

Use Ember CLI
In general, replace views + controllers with components
Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController
Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.

Converting libraries to Ember CLI addons

In this guide we will cover two main cases:

Ember specific library
vendor library

Ember library

The Ember library will assume that Ember has already ben loaded (higher in the loading order) and thus will assume it has access to the Ember API.

"Model-dependent query param stickiness"

The question of whether query param controller properties are preserved/restored/reset when navigating away/back/between routes is a tricky one, but the sensible default seems to be "model-dependent stickiness", whereby query params are stick unless you're switching the model of the current or parent routes. There's more that could be said about this but here's a quick summary of my plan:

We need a dictionary to store QP state scoped to a model

	// install ember-cli-es6-transform

	function importFromNPM(app,moduleName) {
	let relPath = `node_modules/${moduleName}`;
	let nodePath = `./${relPath}`;
	let config = require(`${nodePath}/package.json`);

	if (config.style) {
	app.import(`${relPath}/${config.style}`);
	}