骨幹視圖中不呈現正確的DOM元素

我有兩個視圖對象：骨幹視圖中不呈現正確的DOM元素

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>

我然後調用兩種觀點的情況下渲染to dom：

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

問題是視圖元素被追加到帶有id #hip模型的ul標籤和不像我在這個觀點中所概述的那樣。我不明白是什麼導致了這個問題，以及如何解決這個問題。

來源

2013-03-06 user2054833

爲什麼你到處使用全局變量？ – 2013-03-06 16:57:09

它看起來像genrehiphop會去#hiphop和genrepop將去#pop。究竟是什麼問題？ – Evan 2013-03-06 16:57:18

#pop將去#hiphop – user2054833 2013-03-06 17:23:35

最好是控制視圖之外的視圖到DOM元素的映射。您不希望視圖要求關於其周圍頁面結構的信息。將視圖綁定到特定元素還會阻止在站點/頁面的其他區域重複使用。

1 - 從你的觀點

2取出EL財產 - 綁定的意見，DOM元素是這樣的：

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

見this article的詳細信息，結合意見元素。

來源

2013-03-06 18:23:29 explunit

在您的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});

這樣，你正在使用的collection和view該requirejs越來越爲你傳遞給TH是功能。

您還需要對其他文件進行此更改。這樣，你沒有使用一些全局變量來創建對象。

來源

2013-03-06 20:42:39 anthonylawson

骨幹視圖中不呈現正確的DOM元素

回答

相關問題