Làm cách nào tôi có thể đặt động một className cho chế độ xem Backbone.js dựa trên các thuộc tính mô hình của nó?

Question

Về cơ bản những gì tôi cần là để làm một cái gì đó như thế này

App.CommentView = Backbone.View.extend({ 
    className: function() { 
    if (this.model.get('parent_id')) { 
     return 'comment comment-reply'; 
    } else { 
    return 'comment'; 
    } 
    }, 

Vấn đề là, rằng vào hàm được chuyển vào className được thực hiện trong bối cảnh của html của xem mẫu, vì vậy tôi không thể gọi this.model.

Có cách nào để tôi có thể truy cập vào mô hình tại thời điểm này trong quá trình kết xuất không? Hoặc tôi có cần phải đặt lớp sau, ví dụ như trong hàm render?

Answer 1

này nghe có vẻ giống như một việc làm cho mô hình ràng buộc.

App.CommentView = Backbone.View.extend({ 
    initialize: function() { 
     // anytime the model's name attribute changes 
     this.listenTo(this.model, 'change:name', function (name) { 
      if (name === 'hi') { 
      this.$el.addClass('hi'); 
      } else if...... 
     }); 
    }, 
    render: function() { 
     // do initial dynamic class set here 
    } 

Answer 2

Sẽ dễ dàng hơn nhiều nếu tôi nghĩ sử dụng this.$el.toggleClass hoặc chỉ cần thêm lớp vào bên trong render.

Tuy nhiên nếu bạn muốn thiết lập các lớp học khi xây dựng quan điểm, bạn có thể vượt qua nó như một tùy chọn:

view = new App.CommentView({ 
    model: model, 
    className: model.get('parent_id') ? 'comment comment-reply' : 'comment' 
}) 

Answer 3

Bạn nên sử dụng các thuộc tính băm/chức năng:

attributes: function() { 
//GET CLASS NAME FROM MODEL 
return { 'class' : this.getClass() } 
}, 
getClass: function() { 
    return this.model.get('classname') 
}