0

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

2 回答 2

0

您在 上缺少一个元素VideoView，因此它只是呈现给li未附加到 DOM 的元素。我会建议这样的事情：

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

小提琴

于 2013-09-07T19:55:41.047 回答
0

传统上，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);

把一切都搞定。

于 2013-09-07T20:02:26.150 回答