How to add class after append in Backbone.js?

Question

Back again with another question about my todo-app.

Currently the development is going good. It's now possible to add todo's, delete todo's, edit todo's and 'finish' todo's.

You can see the result so far here: http://todoapp.lusenet.com/

The app contains to views: the TodoView and the AppView. The AppView renders the application using the TodoView.

When the application gets loaded, the initialize function of the AppView gets called. This is what happens there:

initialize: function(){
    this.input = this.$('#addTodo');
    this.todoCollection = new app.TodoCollection(); // Create collection
    this.todoCollection.fetch({reset: true}); // Fetch items

    this.listenTo(this.todoCollection, 'reset', this.addAll);
    this.listenTo(this.todoCollection, 'add', this.addOne);
}

So I create a new collection, fetch the models which are in there, which fires the reset event. reset then calls the addAll function.

This is the addAll function:

addAll: function(){
    var i = 0,
        self = this;

    this.$('#todoList').html(''); // clean the todo list
    this.todoCollection.each(function(todo){
        i++;
        setTimeout(function(){
            self.addOne(todo);
        }, 200*i);
    });
}

This function just loops through the entire collection and calls addOne for every model. This is done in a timeout so that the models get appended one after another.

This is the addOne function:

addOne: function(todo){
    var view = new app.TodoView({model: todo}).render();
    $(view.el).appendTo('#todoList');
}

Here my troubles start. The addOne function appends a model the list, which is completely fine. When I add this CSS to the model:

-webkit-transition: all 2000ms ease-out;
-moz-transition: all 2000ms ease-out;
-ms-transition: all 2000ms ease-out;
-o-transition: all 2000ms ease-out;
transition: all 2000ms ease-out;
bottom:-2px;
opacity: 0;

The model is hidden when added, which is what I want. I figured, if I call addClass after the append, I can animate the model. So I added one line of code to make the addOne function like this:

addOne: function(todo){
    var view = new app.TodoView({model: todo}).render();
    $(view.el).appendTo('#todoList');
    view.$el.addClass('show');
}

This works, only the model already has the class 'show' when I append it, so no fade in happens. How can I add the class after the append is done? Or am I just doing it completely wrong?

Thanks!

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

Perhaps the browser doesn't have enough time to actually insert the element into the DOM before class is added.

I'd try using setTimeout, and you really don't need large values there.

addOne: function(todo){
    var view = new app.TodoView({model: todo}).render();
    view.$el.appendTo('#todoList');
    setTimeout(function(){
        view.$el.addClass('show');
    }, 40);
}

This is actually a known trick, and some people even call it with 0 timeout.

edited May 23 '17 at 12:03

Community

1
1

answered Oct 27 '15 at 16:07

Yura

2,690
26
32

This does work! Only weird that it has to be done this way.. Any way to just make a call to a function when appendTo is done? – DavidWorldpeace Oct 27 '15 at 16:09
That is actually something about how browser handle element insertion and processing javascript that comes next. I've added link to another answer, which explains that in detail. – Yura Oct 27 '15 at 16:14

How to add class after append in Backbone.js?

1 Answers1