Backbone/Vimeo API - 查看日志记录，但不渲染

Backbone/Vimeo API - View logging but not rendering

本文关键字：记录 日志 Vimeo API Backbone      更新时间：2023-09-26

我目前正在学习Backbone并尝试构建我的第一个应用程序。作为一种学习工具，我正在尝试按用户 ID 渲染 Vimeo 画廊。

我已将所有内容放在一起，并且我的视图正在正确记录，但它不会呈现到页面。几个小时以来，我一直在尝试解决这个问题，但我不确定我哪里出错了。任何见解都非常感谢。我的方法正确吗？

<!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>

您在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);

小提琴

传统上，render只是填充视图的el，但不接触 DOM。通常的模式是这样的：

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

通常render返回this因此您经常会看到：

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

首先调整所有render方法，以 return this; 结尾。然后调整内容以更新 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);

把一切都搞大。

相关文章：