2

ユーザーが にアクセスしたときに、http://example.com/#/playlistいくつかの曲をリストしたいと考えています。

http://example.com最初にアクセスしてリンクをクリックすると機能します（すべての曲がリストされます）<a href="#/playlist">Playlist</a>。

ただし、直接 に移動するとhttp://example.com/#/playlist、何も表示されません。

this.collection プロパティをログに記録すると、コレクションは常に同じです (リンクを使用するか、直接アクセスする場合)。

唯一の違いは、this.collection.each( function ( song ) {} );以下の render 関数では、URL に直接アクセスするときにループしないことです。

これはコードです：

define(
    [
        'jQuery',
        'Underscore',
        'Backbone',
        'collections/songlist',
        'views/song'
    ],

    function ($, _, Backbone, SonglistCollection, SongView)
    {
        var PlaylistView = Backbone.View.extend({

            // properties
            el: '#content',
            tagName: 'ul',
            collection: new SonglistCollection(),

            /**
             * Initialize
             */
            initialize: function()
            {
                // load songs
                this.collection.bind( 'reset', this.render(), this );
                this.collection.fetch();
            },

            /**
             * Render
             */
            render: function ()
            {
                this.$el.html('');

                console.log(this.collection);

                this.collection.each( function ( song )
                {
                    var songItem = new SongView( { model: song } );
                    this.$el.append( songItem.el );

                }, this);
            }

        });

        return new PlaylistView;

    }
);

問題は、「each-loop」で発生します。

render: function ()
                {
                    this.$el.html('');

                    console.log(this.collection);

                    this.collection.each( function ( song )
                    {
                        var songItem = new SongView( { model: song } );
                        this.$el.append( songItem.el );

                    }, this);
                }

アップデート

これは私のルーティングコードです:

define([
    'jQuery',
    'Underscore',
    'Backbone',
    'views/start',
    'views/playlist'
],

    function ($, _, Backbone, startView, playlistView)
    {
        var AppRouter = Backbone.Router.extend({
           routes: {
               'playlist': 'playlist',

               // default
               '*actions': 'start'
           },

           start: function ()
           {
               // call render on the module we loaded via the dependency array
               // views/items/list
               startView.render();
           },

            playlist: function ()
            {
                playlistView.render();
            },

            defaultAction: function ( actions )
            {
                // no default action, let's just log what the url was
                console.log('No route:', actions)
            }
        });

        var initialize = function ()
        {
            var app_router = new AppRouter;
            Backbone.history.start();
        }

        return {
            initialize: initialize
        };
    }

);
4

3 に答える 3

1

playlistView.render();問題は、電話をかけたときにRouter、playlist.collectionまだ入力されていないことだと思います。

が表示するものを信頼していますが、複雑なオブジェクトをconsole.log(this.collection);信頼することはできません。console.log()

小切手：

于 2012-06-27T13:48:53.613 に答える
0

MVCパターンでは、ビューはモデルの変更に応答します。あなたはそれをあなたのコードに次のように設定しています：

this.collection.on('reset', this.render, this);

ただし、問題は、ビューを再レンダリングするリセットを引き起こしていないことです。したがって、「プレイリスト」でrenderメソッドを呼び出す代わりに、コレクションのURLを適切なRESTエンドポイントに変更してから、collection.fetchを実行します。フェッチを実行すると、「リセット」が実行され、更新されたコレクションを適切に反映してレンダリングが呼び出されます。

于 2012-06-27T22:13:50.447 に答える
0

問題は、PlayListViewに戻す前に初期化するという事実に関連していると思いますrequire.js。renderまた、コレクションのフェッチが確実に完了する前に、PlaylistView のメソッドを任意に呼び出します。

  1. だからあなたが通過するときhttp://example.com：
    1. startView の初期化が必要
    2. 初期化 playListView が必要 -> コレクションのフェッチ開始
    3. startView へのルート
    4. playListView fetch が返される -> コレクションにデータが入力されるようになりました
    5. リンクをクリック -> playListView を正しくレンダリング
  2. そしてあなたが通過するときhttp://example.com/#/playlist：
    1. startView の初期化が必要
    2. 初期化 playListView が必要 -> コレクションのフェッチ開始
    3. playListView へのルート -> コレクションがまだフェッチされているため、playListView を正しくレンダリングしません (つまり、ループするものがありません)。
    4. playListView fetch が返される -> コレクションにデータが入力されるようになりました

この行 return new PlaylistView; をこれに 変更しますreturn PlaylistView;

Routerコースも変更する必要があります

function ($, _, Backbone, startView, **PlaylistView**) // change the variable name
...
var AppRouter = Backbone.Router.extend({
  ...
  playlistView: null, // Add attribute for the router
  ...
  playlist: function () {
    playlistView = new PlayListView();
    // No render because you bound the render to the reset of the collection !!!
  },
  ...
}
...

必要なものがまだアンロードされている間は、PlaylistView を初期化することはありません。

于 2012-06-27T13:43:07.813 に答える