백본 컬렉션에서 실제 렌더링 된 모델을 추적하는 방법

Question

백본을 처음 사용하고 컬렉션의 모든 모델을 표시하는 간단한 슬라이드 쇼를 만들려고합니다.

모델은 서버에서 가져 오기를 통해 만들어지고 여기에 코드입니다 : 각각 다음 및 이전 모델 반환이 PostCollection있는 거 modelBefore 및 modelAfter에서

var Post = Backbone.Model.extend({ 
    defaults:{ 
    text: "", 
    source: "", 
    image: "", 
    posted_at: "", 
    rendered : false, 
    }, 
}); 

은. 다음 또는 이전 템플릿을 렌더링 처리 옆에 이전 방법 :

var PostCollection = Backbone.Collection.extend({ 
    model: Post, 
    url: "https://milkytags.com/api/v1/boards/edcb2c43-1448-4c81-97d5-1c315c8f9589/posts", 

    initialize: function() { 
    this.fetch({ data: $.param({ page: pageCounter, per_page:3}) }); 
    }, 

    parse: function(response) { 
    return response.posts; 
    }, 

    modelBefore: function(model) { 
    index = this.indexOf(model) - 1; 
    if (index < 0) { 
     index = this.length - 1; 
    } 
    return this.at(index); 
    }, 

    modelAfter: function(model) { 
    index = this.indexOf(model) + 1; 
    if (index === this.length) { 
     index = 0; 
    } 
    return this.at(index); 
    }, 
}); 

나는 포스트보기에 의존 템플릿에서 뷰를 작성 SlideShowView라는 뷰를 만들었습니다. 마지막으로

var SlideShowView = Backbone.View.extend({ 
    tagName: 'div', 
    className: 'slideshow', 
    events: { 
    'click #close': 'close', 
    'click #next': 'next', 
    'click #prev': 'prev', 
    }, 
    template: _.template($('#slideShowTemplate').html()), 

    initialize: function() { 
    this.render(); 
    }, 

    render: function() { 
    this.$el.html(this.template()); 
    post = new PostView({ model: this.model }); 
    this.$el.append(post.el); 
    return this.$el; 
    }, 

    close: function(){ 
    this.remove(); 
    }, 

    next: function(){ 
    var next = this.model.collection.modelAfter(this.model); 
    post = new PostView({ model: next }); 
    this.$el.html(this.template()); 
    this.$el.append(post.el); 
    return this.$el; 
    }, 

    prev: function(){ 
    var prev= this.model.collection.modelBefore(this.model); 
    post = new PostView({ model: prev }); 
    this.$el.html(this.template()); 
    this.$el.append(post.el); 
    return this.$el; 
    }, 
}); 

, 포스트보기 :

// The View for single Post 
var PostView = Backbone.View.extend({ 
    tagName: 'div', 
    className: 'post', 
    events: { 
    'click' : 'slideShow', 
    }, 
    template: _.template($('#postTemplate').html()), 

    initialize: function() { 
    this.render(); 
    }, 

    render: function() { 
    this.$el.html(this.template(this.model.toJSON_milky())); 
    return this; 
    }, 

    slideShow: function(){ 
    test=new SlideShowView({model: this.model}); 
    $('#milkyContainer').append(test.$el); 
    } 
}); 

문제는 내가 컬렉션이 최신 렌더링 요소와 업데이트되지 않은 것처럼 그것이 실제로, 다음 또는 이전 누를 때 발생한다, 나는 찾을 수있다 방법은 컬렉션에 현재 컬렉션 요소가 무엇인지 알려주는 것입니다.

팁?

감사

Answer 1

지금 당신의 코드는 "현재의 모델"로 SlideShowView에 this.model을 사용하고 있습니다. 그러나 업데이트하지 마십시오. 이 같은 것이 그것을 할 것입니다 :

prev에 대한 유사합니다.