Todo MVC guide for Ember 1.11


#1

Hi,

This topic is about my journey as a new Ember.js user. As for every new stack I discover, I look up for some getting start guides like the Todo MVC one, unfortunately this one is not available for Ember.js 1.11 so it was really a pain at some points. It took me 3 big evenings to be able to get the TodoMVC working by switching from the legacy todoMVC guide, the new doc, the roadmap to 2.0, blog posts and SO answers.

But my perseverance has beaten it :smile:

NB: These points are not remarks at all, I enjoy how Ember.js can make my life easier. I just write it as a feedback for Ember staff, documentation maintainers and maybe it can also help future newcomers to Ember.js

Installing Ember.js and Planning the application

Already, two different ways from the current doc and the TodoMVC guide. In the former you can install it with EmberCLI and in the latter you just download dependencies that you include in your html mockup.

I love command line tools, so setting up a new project with Ember CLI was quite easy. The server, the watch feature etc… are really cool. Unfortunately despite what is written in the EmberCLI docs, having the public assets (in this case one stylesheet and a background image) in the public/assets folder, the concatenation does not appear to happen. So not a big blocker, I just include it manually in order to go forward.

Adding a route and a template

I have just needed to update to the 1.11 route definitions, replacing this.resource by this.route , also what is generated with EmberCLI and what is in the docs differ quite a lot and can be a blocker to some people.

Like for e.g, if you read the Todo guide, all templates are hardcoded in the index.html in handlebars scripts tags.

Adding fixtures

This took me a long time to make it work. Upgrading to the new fixtures definition :

Todo.reopenClass({
	FIXTURES: [
		{
			id: 1,
			title: "One todo to be achieved",
			isCompleted: true
		},
		{
			id: 2,
			title: "A second todo fixture",
			isCompleted: false
		}
	]
});

was easily found. However making the Fixtures adapter was done by trying a lot of possibilities :

  1. Using EmberCLI, the adapters folder is not created
  2. What pointed me to using the adapters folder was this SO question : http://stackoverflow.com/questions/25744233/ember-fixtures-not-working

Displaying model data

In the depreciations part of the documentation, you can see that bind-attr is not more needed.

Creating a model record

This line in the code example :

if (!title.trim()) { return; }

if title is undefined, the trim() function will trigger an error.

Also, there is no need anymore to append _controller to the filename.

Marking a model as complete or incomplete

This was a strong one to find, at least for me. By adding itemController=xxx in the each helper, the todo title were not displayed anymore. The errors says nothing, in the Ember chrome extension the data is well there and nothing in the doc or a SO question, just nothing except this line in the Roadmap :

In both cases, the short version is that you can no longer rely on the proxying behavior of ObjectController or ArrayController, but you can remedy the situation by prefixing model. to the property name.

If there are more references to this behavior, please point me to them. Writing todo.model.title in the each loop when itemController is specified was making it working.

Accepting edits

This make us create a new view. And in the same time made me read the components , template helpers and the views sections of the documentation a couple of time.

And to be honest, I still can’t figure out why this should be a view and not a component ? Or more globally when to create views instead of components for user interactions ?

Adding child routes

This took me a little while to figure out which template was looked up by ember and I had to read the routing section of the doc a couple of times to find that Ember will look by itself for the /todos/index route which we didn’t specified. But yeah I could find it.

Toggle between complete and incomplete

This code :

// ... additional lines truncated for brevity ...
allAreDone: function(key, value) {
  if (value === undefined) {
    return !!this.get('length') && this.isEvery('isCompleted', true);
  } else {
    this.setEach('isCompleted', value);
    this.invoke('save');
    return value;
  }
}.property('@each.isCompleted')
// ... additional lines truncated for brevity ...

Where the hell is this length coming from ?

The code in the [todoMVC github repository][3] is more un-understandable :

/* properties */

		remaining: Ember.computed.filterBy('model', 'isCompleted', false),
		completed: Ember.computed.filterBy('model', 'isCompleted', true),

		allAreDone: function (key, value) {
			if (value !== undefined) {
				this.setEach('isCompleted', value);
				return value;
			} else {
				var length = this.get('length');
				var completedLength = this.get('completed.length');

				return length > 0 && length === completedLength;
			}
		}.property('length', 'completed.length')

And in fact can be replaced by this :

allAreDone: function(key, value) {
		if (value === undefined) {
			return this.get('hasCompleted') && this.get('remaining') === 0;
		} else {
			this.setEach('isCompleted', value);
			this.invoke('save');
			return value;
		}
	}.property('hasCompleted', 'remaining')

Replacing the FixturesAdapter by the LocalStorageAdapter :

Really cool, it is really what I need for the project that took me looking into Ember.js, it is working well except some depreciations warnings about _snapshots and _createRecord methods.

Conclusion

I’m happy to see how Ember.js is working, in the beginning I was thinking it was maybe not the best moment to dig into Ember due to the upgrading to 2.0 phase and this lack/mix/legacy documentation.

What this simple TodoMVC has shown me at the end, and some blog posts I have read on the internet (especially Ember.js + D3) are reinforcing my feeling to have done a great choice.

I hope to discover more and more awesome features and to post here again (but with questions :slight_smile: )

Ho, and I love the logo !

Cheers,

Chris

NB1: For those interested, here is the final code https://github.com/ikwattro/emberjs-1-11-todomvc

NB2: The Max 2 links in the post for new users is rhh :slight_smile:


#2

What’s more confusing is that in /app/templates/todos/index.hbs {{if todo.isCompleted 'completed'}} seems to work but not {{todo.title}}.