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();

问题是视图元素是附加到id #hip模型的ul标记，而不是我在视图中概述的。我不明白造成这种情况的原因以及如何解决这个问题

Answer 1

最好从视图外部控制视图到DOM元素的映射。您不希望视图需要有关其周围页面结构的信息。将视图绑定到特定元素也会阻止在站点/页面的其他区域中重用。

1 - 从您的观点中删除el属性

2 - 将视图绑定到DOM元素，如下所示：

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

有关将元素绑定到元素的更多信息，请参阅this article。

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});

这样你就可以使用collection和view来获取并传递给这个函数。

您还需要对其他文件进行此更改。这样，您就不会使用某些全局变量来创建对象。

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

2 个答案: