Javascript 是否将类添加到集合视图中的最后一个元素？

在消息视图中，我试图以集合中的最后一个元素为目标，我只能以模型为目标，而不能以el为目标

下面我让控制台返回el，但由于某种原因，当我尝试向

$（this.$el）

添加类时，它在DOM中不存在。所以我被难住了

var Marionette = require('backbone.marionette');

var MessageView = Marionette.ItemView.extend({

    className: 'message',
    template: require('../../templates/message.hbs'),
    initialize: function() {
        this.model.on('change', this.test, this);
    },
    test: function() {
        console.log($(this.$el));

        // Would like to target that last element
        // so I can use somethng like bounce.js to
        // add an animation to the newly added message
    }


});  

module.exports = CollectionView = Marionette.CollectionView.extend({

    className: 'collection',
    initialize: function() {
        // this is triggered in a parent view with the .create method
        this.listenTo(this.collection, 'change', this.render);
    },
    itemView: MessageView

});

---

我正在尝试向新添加的项目添加动画，但无法将该视图中的最后一个元素作为目标。你知道我做错了什么吗？

所以我就这样做。很好。在我的create方法中，我将只针对集合中的

：last

项，它会重新呈现它显示的整个集合，因此每次创建消息时，都会创建一个新列表，从而使新创建的消息成为最后一个

// send the message to the DB (client submit triggers this)
if($message.val() != '') {

    $message.val('');

    /* POST the message to the DB and add the message on the client side */
    window.App.data.messages.create(Message, {
        success: function(model) {
            self.scrollChat();
            self.reScroll();
            socket.emit('messageFromClient', Message);
            window.App.core.vent.trigger('app:log', 'Chat View: (POST) new message created!');
            var bounce = new Bounce();
                bounce
                  .translate({
                    from: { x: -300, y: 0 },
                    to: { x: 0, y: 0 },
                    duration: 600,
                    stiffness: 4
                  })
                  .scale({
                    from: { x: 1, y: 1 },
                    to: { x: 0.1, y: 2.3 },
                    easing: "sway",
                    duration: 800,
                    delay: 65,
                    stiffness: 2
                  })
                  .scale({
                    from: { x: 1, y: 1},
                    to: { x: 5, y: 1 },
                    easing: "sway",
                    duration: 300,
                    delay: 30,
                  })
                  .applyTo($('.collection .message:last'));
        }
    });   

}