0

2つのビューオブジェクトがあります。

 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

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

そうすれば、requirejsを使用して、この関数に渡すことができますcollection。view

他のファイルについてもこの変更を行う必要があります。このように、オブジェクトを作成するためにいくつかのグローバル変数を使用していません。

于 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 に答える