Question

我正在学习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>

Answer 1

你错过了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

Answer 2

传统上，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); 你想说：

{{1}}

把一切都搞砸了。

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

2 个答案: