骨干視圖無法呈現正確的dom元素

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>

然后我調用兩個視圖的實例來渲染到dom：

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

問題是視圖元素附加到帶有#hip模型的ul標記，而不是我在視圖中概述的。 我不明白是什么導致了這個以及如何解決它

Answer 1

最好從視圖外部控制視圖到DOM元素的映射。 您不希望視圖需要有關其周圍頁面結構的信息。 將視圖綁定到特定元素也會阻止在站點/頁面的其他區域中重用。

1 - 從您的視圖中刪除el屬性

2 - 將視圖綁定到DOM元素，如下所示：

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

有關將元素綁定到視圖的更多信息，請參閱此文章 。

Answer 2

在您的define語句中，您將5個參數傳入第一個數組，但只將前3個參數設置為函數的參數。 例如，嘗試將文件中的第一行更改為：

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

然后在創建collection的行上執行以下操作：

collection: new ActHipHopVideoCollection(),

當您創建每個videoView ，請執行以下操作：

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

這樣你就可以使用requirejs為你獲取並傳遞給這個函數的collection和view 。

您還需要對其他文件進行此更改。 這樣，您就不會使用某些全局變量來創建對象。