Backbone將類添加到集合視圖中的最後一個元素？

Question

在消息視圖中，我試圖定位集合中的最後一個元素，我只能定位模型而不是el。

下面我得到控制檯返回el，但由於某種原因，它不存在於DOM中，當我嘗試添加一個類到$(this.$el)沒有任何反應。所以我很難過。

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 

}); 

我想添加一個動畫到新添加的項目，但我無法定位該視圖中的最後一個元素。關於我做錯什麼的想法？

Answer 1

所以我只是想這樣做。工作正常。在我的創建方法中，我只是將集合中的: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')); 
     } 
    }); 

}