jquery - Backbone 直接url访问中断集合

用户转到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
        };
    }

);

最佳答案

我认为问题与您在将PlayListView返回到require.js之前初始化它有关。另外，在通过获取绝对完成收集之前，您可以任意调用PlaylistView的render方法。


因此，当您浏览http://example.com时：

需要init startView
需要初始化playListView->集合获取开始
路由到startView
playListView获取返回->现在已填充集合
单击链接->正确渲染playListView

当您通过http://example.com/#/playlist时：

需要init startView
需要初始化playListView->集合获取开始
路由到playListView->渲染playListView不正确，因为集合仍在获取（也没有要循环的内容）
playListView获取返回->现在已填充集合



更改此行
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。

关于jquery - Backbone 直接url访问中断集合，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11226455/