骨干视图无法呈现正确的dom元素

Question

I have two view objects:

 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

}); 

These Object should then append there content to this 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>

I then call instances of both views to render to dom:

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

The problem is the view elements are append to the ul tag with id #hip model and not as I outlined in the view. I don't understand what is causing this and how to fix it

Answer 1

It's better to control the mapping of views to DOM elements from outside the view. You don't want the view to require information about the structure of the page around it. Having the view bound to a specific element also prevents reuse in other areas of the site/page.

1 - remove the el property from your views

2 - bind the views to DOM elements like this:

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

See this article for more information on binding views to elements.

Answer 2

In your define statements, you are passing in 5 arguments into the first array, but only setting the first 3 to parameters to the function. For example, try changing the first line in your file to:

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

And then on the line where you create the collection , do this:

collection: new ActHipHopVideoCollection(),

And when you create each videoView , do this:

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

That way you are using the collection and view that requirejs is getting for you and passing to this function.

You will need to make this change for the other file as well. This way, you are not using some global variables to create objects.