0

我有两个视图对象：

 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 标记，而不是我在视图中概述的那样。我不明白是什么原因造成的以及如何解决它

4

2 回答 2

1

在您的定义语句中，您将 5 个参数传递到第一个数组中，但仅将前 3 个参数设置为函数的参数。例如，尝试将文件中的第一行更改为：

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

然后在创建 的行上collection，执行以下操作：

collection: new ActHipHopVideoCollection(),

当您创建 each 时videoView，请执行以下操作：

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

这样你就可以使用collectionand viewthat requirejs 正在为你获取并传递给这个函数。

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

于 2013-03-06T20:42:39.860 回答
1

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

1 - 从您的视图中删除 el 属性

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

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

有关将视图绑定到元素的更多信息，请参阅本文。

于 2013-03-06T18:23:29.353 回答