骨干视图中不呈现正确的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元素

回答

相关问题