Great blog, however I don't think "instanciate" is a word? Its used quite often. I think you need to use "instantiate"

im beginer, and i only can follow you until 2.4.1, u go too fast. but thanks, i learned something.

Just thought I'd throw this up for anyone else learning underscore with a rails app.... Thanks for the excellent tutorial!

Rails attempts to parse Underscore's <%- %>. Use the following to change underscore's settings to Mustache's style {{= }} and {{ }}. Modify your local underscore settings using the following.

_.templateSettings = {
interpolate: /\{\{\=(.+?)\}\}/g,
evaluate: /\{\{(.+?)\}\}/g
};

For me as a beginner I got lost.

Hi, Thank you for this tutorial, but this is not for the beginners, you just put lot of things in the code without explaining them, for example, you put :

app.TodoView

and

app.AppView

how app.AppView is using or calling app.TodoView ?

another one :

what add and reset are in these two lines :

app.todoList.on('add', this.addAll, this);

app.todoList.on('reset', this.addAll, this);

for me as a beginner I got lost.

Views are usually composed of models and listen to changes on the model that they are composed of. Eg, TodoView is the view for each todo item created by the user, and hence is composed of a 'todo' model.

I've found a little mistake in the initialize() function of the AppView. When the event "add" is being triggered this.addOne should be called instead of this.addAll. this.addAll renders the entire list for every containing model. If you load the app with 20 todos, the list is rendered 20 times.

Would be good to say where the #item-template should go. If you carelessly add it to the bottom of the HTML file, it doesn't work, I assume since the JS executes before the template is in the DOM.

You can actually see its appropriate placement in the final html file: https://github.com/amejiaro...

I'm getting an Uncaught Reference error: store is undefined.

This stumped me too. Looks like you need to include backbone.localstorage.js which wasn't mentioned

It was actually talked about section 2.3 of the article. ;)

Ben & Alex,
<script src="http://cdnjs.cloudflare.com..." type="text/javascript"></script>
do this..it'll work fine

Import in section 2.3 is missing a trailing </script> .... adding that fixes some breaks in 2.3

A really good post - really meant for absolute beginners.

Glad you liked it!

Whats the purpose of binding addAll to todoList.reset()? If there were items in the list, wouldnt that just add them? But you are binding it to reset so there will never be any. I guess it works but its a little confusing for beginners.

app.todoList.on('add', this.addOne, this); // anybody tel me Wat it does?
app.todoList.on('reset', this.addAll, this); // anybody tel me Wat it does?
app.todoList.fetch(); // Loads list from local storage

app.todoList.on('add', this.addOne, this);

/*turn on the event listener on the 'todoList' object. The listener listens for an 'add' event, and fires the callback function 'this.addOne'*/

Hope that clarifies things. You might find an annotated source helpful for explaining the different commands: http://backbonejs.org/docs/...

I'm getting an Uncaught Reference error

I am sorry but this is not for the beginners. One gets easily lost in this part 2 as the contents get turned upside down and makes no sense to someone who is looking at backbone for the first time.
So not for 'absolute beginner', sorry to say!

Hi, This is a great tutorial. and I think this is a first one which explains things well in order to understand.

While for some reason I am getting my todos listed but all the titles are coming as undefined.
Any idea why is this happening?

Appreciate if you could explain the same.

Thanks a lot for the great tutorial!

As a little contribution, I would suggest to name instances like `modelTodo`, `collectionTodoList` or something that will reveal what kind of instance is mentioned. I think it would be a little bit clearer for the beginner, since we have similar entities in the code. For example, one would think whether a todoList is a collection or a rendered html Todo list. Another example - .addOne(todo) method takes `todo` but looking at the `todo` variable its not obvious for beginner whether it should be a todo model or already rendered todo item. I hope with this approach it will be harder to `get lost`

Thank you again :)

Thanks

Was a great help ! Atleast got the basic working idea cleared ! Thanks a lot !

The test in your browsers console doesn't work for me. Is there something missing? for the first line alone I get Uncaught TypeError: undefined is not a function

at <anonymous>:2:12

at Object.InjectedScript._evaluateOn (<anonymous>:895:140)

at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34)

at Object.InjectedScript.evaluate (<anonymous>:694:21)

nevermind, it doesn't say to keep the code that you had previously written in place.

I was confused when you said to test it in the console. I know how to look around in inspect element, but I was not sure where to enter the text that you supplied. Also, what would a positive or negative test result look like?

Thank you for putting this together,
Colby

Can some one tell me whats going on when he wrote this line.... this.$el.html(this.template(this.model.toJSON()));

2.2.- Backbone.Model
test in Chrome console returned nothing except the correct date. What are we supposed to see there?

Very helpful serie of articles! Thanks a lot.
I had some problems to display list of todos.
I resolved this by setting collection fetch call with {reset: true} option like this :

initialize: function () {
this.input = this.$('#new-todo');
// when new elements are added to the collection render then with addOne
app.todoList.on('add', this.addOne, this);
app.todoList.on('reset', this.addAll, this);
app.todoList.fetch({reset: true}); // Loads list from local storage
},

fantastic tutorial so far. however, your backbone, jquery, and localStorage JS links are broken. it's easy to swap them out, but i copied the links straight from your tutorial, and was wondering why Chrome was giving me so many errors. Got me lost and confused.

Just a little thing. in 2.3 when testing the code "todoList.pluck('title');" The return value is the list of titles and not the list of completed as in comment.

One problem here is that you the addition of the #item-template template is never mentioned. It's referenced in the View but we've never added it to our file.

It is in the git repo at:
https://github.com/amejiaro...

Good catch, I fix it!

How to attach key events to dynamically created element in backbone view ?

You can attach events to dynamically created elements by creating them with the proper class or id. For instance, in the code example above, every element created with the #new-todo class will listen for the keypress event.

How to add key events to dynamically created element ?

You can see an example in the 2.4.3 Todo View. If you notice in the code example, there is a property called 'events' where you can bind any kind of events to functions, including key events. The convention is the following:

'{{event_name}} {{class_name_or_id}}': {{function_name}}

Examples:
'keypress #new-todo': 'createTodoOnEnter'
'keydown #new-todo': 'doSomething'
"click .icon": "open"
"dblclick" : "open"