вид Backbone не делает правильный Dóm элемент

Question

У меня есть два просмотра объекта:

define(['jquery','underscore','backbone','collections/HipHopVideos','views/Video'],function($,_,Backbone){ 
    GenreHipHop = Backbone.View.extend ({ 
    el:"#hipHop", 
    collection: new HipHopVideosCollection, 

    initialize: function() 
    { 
     context = this; 
     //fetche data for collection 
     this.collection.fetch({success:function() 
      { 
       context.render(); 
      } 
     }); 
    }, 


    render: function() 
    { 
     this.collection.each(function(video) 
     { 
      videoView = new VideoView({model:video}); 
      this.$el.append(videoView.render().el); 
     },this); 
    }//end render function 

}); 
    define(['jquery','underscore','backbone','collections/PopVideos','views/Video'], function($,_,Backbone){ 
    GenrePop = Backbone.View.extend({ 
    el:"#pop", 
    collection: new PopVideosCollection(), 


    initialize: function() 
    { 
     context = this; 
     //fetche data for collection 
     this.collection.fetch({success:function() 
      { 
       context.render(); 
      } 
     }); 
    },//end initialize function 


    render: function() 
    { 
     this.collection.each(function(video) 
     { 
      videoView = new VideoView({model:video}); 
      this.$el.append(videoView.render().el); 
     },this); 
    }//end render function 

}); 

Эти объекты должны затем добавить туда содержимое в этом HTML:

  <div class="sect"> 
        <a href="" class="genre_title">Pop</a> 
        <img class="previousBtn" src="images/nav-left.png"/> 
        <ul class="video_item" id="pop" page="1"></ul> 
        <img class="nextBtn" src="images/nav-right.png"/> 
        <button class="btn btn-small view-all" type="button">view all</button> 
       </div> 
       <div class="sect"> 
        <a href="" class="genre_title">Hip Hop</a> 
        <img class="previousBtn" src="images/nav-left.png"/> 
        <ul class="video_item" id="hipHop" page="1"> 
         <script> //loadHipHop()</script> 
        </ul> 
        <img class="nextBtn" src="images/nav-right.png"/> 
        <button class="btn btn-small view-all" type="button">view all</button> 
       </div> 

Затем я называю экземпляры обоих представлений для визуализации в Дом:

pop = new GenrePop(); 
    hip = new GenreHipHop(); 

проблема заключается в том, что вид элементов присоединять к уль тег с моделью ID #hip и не так, как я изложил в представлении. Я не понимаю, что вызывает это и как его исправить.

Answer 1

Лучше контролировать отображение видов на элементы DOM извне представления. Вы не хотите, чтобы представление требовало информации о структуре страницы вокруг него. Наличие привязки к определенному элементу также предотвращает повторное использование в других областях сайта/страницы.

1 - удалить свойство эля из ваших взглядов

2 - связать взгляды на DOM элементов, как это:

var pop = new GenrePop({el: $('#pop')}); 
var hip = new GenreHipHop({el: $('#hipHop')}); 

См this article для получения дополнительной информации о привязке мнения элементов.

Answer 2

В ваших инструкциях определения вы передаете 5 аргументов в первый массив, но только устанавливаете первые 3 параметра в функцию. Например, попробуйте изменить первую строку в файле, чтобы:

define(['jquery', 
     'underscore', 
     'backbone', 
     'collections/HipHopVideos', 
     'views/Video'], 
     function($,_,Backbone, ActHipHopVideoCollection, ActVideoView){ 
... 
} 

А затем на линии, на котором создается collection, выполните следующие действия:

collection: new ActHipHopVideoCollection(), 

И когда вы создаете каждый videoView, сделать это :

videoView = new ActVideoView({model:video}); 

Таким образом, вы используете collection и view, что requirejs становится для вас и переходя к й есть функция.

Вам нужно будет внести это изменение и для другого файла. Таким образом, вы не используете некоторые глобальные переменные для создания объектов.