jquery - 主干网直接url访问中断集合

Question

当用户访问http://example.com/#/playlist时，我想列出一些歌曲。

当您第一次访问 http://example.com 时，它会起作用(列出所有歌曲)然后点击链接<a href="#/playlist">Playlist</a> .

但是如果你直接去http://example.com/#/playlist ，没有显示任何内容。

当我记录 this.collection 属性时，集合始终是相同的(如果您使用链接或直接访问)。

唯一的区别是this.collection.each( function ( song ) {} );在下面的渲染函数中，直接访问 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;

    }
);

问题出现在“每个循环”中:

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

);

Answer 1

我认为问题在于，当您在 Router 中调用 playlistView.render(); 时，playlist.collection 仍未填充.

您信任 console.log(this.collection); 向您显示的内容，但您不能信任复杂的 console.log()对象。

检查:

• https://stackoverflow.com/a/9912865/316700
• http://jsfiddle.net/fguillen/2NZzQ/3/