javascript - 主干 View 未渲染正确的 dom 元素

Question

我有两个 View 对象:

 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>

然后我调用两个 View 的实例来渲染到 dom:

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

问题是 View 元素附加到带有 id #hip model 的 ul 标记，而不是像我在 View 中概述的那样。我不明白是什么原因造成的以及如何解决它

Answer 1

最好从 View 外部控制 View 到 DOM 元素的映射。您不希望 View 需要有关其周围页面结构的信息。将 View 绑定(bind)到特定元素还可以防止在站点/页面的其他区域中重用。

1 - 从 View 中删除 el 属性

2 - 将 View 绑定(bind)到 DOM 元素，如下所示:

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

参见this article有关将 View 绑定(bind)到元素的更多信息。