0

私は現在バックボーンを学んでおり、最初のアプリを構築しようとしています。学習ツールとして、ユーザー 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ため、レンダリングがliDOM に関連付けられていないだけです。私は次のようなことを提案します：

 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 に答える