CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackbone.js
DavidWorldpeace
DavidWorldpeace

Reputation: 549

How to add class after append in Backbone.js?

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!

Upvotes: 0

Views: 1003

Answers (1)

Yura
Yura

Reputation: 2721

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.

Upvotes: 1

Related Questions