백본/Vimeo API - 로깅을 표시하지만 렌더링하지 않습니다.

현재 백본을 학습 중이며 첫 번째 앱을 만들려고합니다. 학습 도구로서 사용자 ID별로 Vimeo 갤러리를 렌더링하려고합니다.백본/Vimeo API - 로깅을 표시하지만 렌더링하지 않습니다.

나는 모든 것을 정리하고 내보기가 올바르게 로깅되지만 페이지에 렌더링되지 않습니다. 나는 이것을 몇 시간 동안 풀려고 노력했지만, 내가 어디로 잘못 갔는지 확신하지 못한다. 어떤 통찰력이라도 대단히 감사하겠습니다. 내 접근 방식이 맞습니까?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Backbone App</title> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> 
</head> 
<body> 

<div id="video-container"> 
    <script type="text/template" id="video_template"> 
    <h1><%= video_title %></h1> 
    </script> 
</div> 

<script> 

(function($){ 

    var vimeoUser = 9836759; 

    var Video = Backbone.Model.extend({}); 

    var VideoCollection = Backbone.Collection.extend({ 
    model: Video 
    }); 

    var VideoView = Backbone.View.extend({ 

    tagName: 'li', 

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

    render: function(){ 
     var variables = {video_title: this.model.attributes.title}; 
     var template = _.template($('#video_template').html(), variables); 
     // Logging element works 
     console.log(template); 
     // Rendering does not work 
     this.$el.html(template); 
    } 
    }); 

    var GalleryView = Backbone.View.extend({ 

    tagName: 'ul', 

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

    render: function(){ 
     this.collection.each(function(video){ 
     var videoView = new VideoView({ model: video}); 
     }, this); 
    } 
    }); 

    // Create instance of VideoCollection 
    var VideoGallery = new VideoCollection; 

    $.ajax({ 
    url: 'http://vimeo.com/api/v2/' + vimeoUser + '/videos.json', 
    dataType: 'jsonp', 
    success: function(response) { 
     // map api results to our collection 
     var videos = _.map(response, function(video) { 
     return { 
      title: video.title, 
      details: video.description, 
      thumbnail_large: video.thumbnail_large, 
      video: 'http://player.vimeo.com/video/' + video.id + '?api=1&player_id=vimeo-player&autoplay=1' 
     } 
     }); 

     // add vimeo videos to collection 
     VideoGallery.add(videos); 
     var galleryView = new GalleryView({ el: $('#video-container'), collection: VideoGallery }); 
    } 
    }); 

})(jQuery); 

</script> 
</body> 
</html>

출처

2013-09-07 idealboy

당신은 VideoView에 요소를 놓치고, 그래서 그냥 DOM에 연결되지 않은 li에 렌더링합니다. 나는이 같은 것을 제안 :

var self = this; 
this.collection.each(function(video){ 
    var container = $("<li>"); 
    self.$el.append(container); 
    var videoView = new VideoView({ el: container, model: video}); 
}, this);

Fiddle

출처

2013-09-07 19:55:41 McGarnagle

대단히 감사합니다. 위대한 작품이며 완벽한 의미를 갖습니다. – idealboy

전통적으로 render 단순히 뷰의 el 채우고 있지만, DOM을 만지지 않습니다. 일반적인 패턴은 다음과 같이 진행됩니다

var v = new View(...) 
v.render(); 
$(container).append(v.el);

보통 render 반환 this 그래서 당신은 종종 볼 수 있습니다 :

$(container).append(v.render().el);

먼저 return this;와 끝까지 모든 render 방법을 조정합니다. 그런 다음 DOM을 업데이트 할 것을 조정 :

var VideoView = Backbone.View.extend({ 
    //... 
    render: function() { 
    //... 
    return this; // <---------- Add this 
    } 
}); 

var GalleryView = Backbone.View.extend({ 
    //... 
    render: function() { 
    this.collection.each(function(video){ 
     var videoView = new VideoView({ model: video }); 
     this.$el.append(videoView.el); // <---------- Add this 
    }); 
    return this; // <---------- Add this 
    } 
});

귀하의 GalleryView이 같은 <ul>을 생성하도록 설정되어 그 당신이 말하고 싶은거야 그래서 el :

var galleryView = new GalleryView({ collection: VideoGallery }); 
$('#video-container').append(galleryView.el);

이 모든 것을 크랭크.

출처

2013-09-07 20:02:26

대단히 감사합니다! 이 답변도 정확하지만 한 가지만 수락 할 수 있습니다. 자세한 설명 주셔서 감사합니다, 나는 패턴을 훨씬 더 잘 이해합니다. 불행히도 Stack Overflow에 익숙하지 않기 때문에 투표를 할 수 없습니다. – idealboy

백본/Vimeo API - 로깅을 표시하지만 렌더링하지 않습니다.

답변

관련 문제