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 ) {} );在下面的 render-function 中，直接访问 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
        };
    }

);

score 1 · Accepted Answer

我认为问题在于，当您调用时playlistView.render();，仍然没有填充。Routerplaylist.collection

你相信console.log(this.collection);向你展示的东西，但你不能相信console.log()复杂的对象。

查看：

score 0 · Accepted Answer

我认为问题与您PlayListView在将其返回到require.js. render此外，您在集合绝对完成获取之前任意调用 PlaylistView 的方法。

所以当你通过http://example.com：
1. 需要初始化 startView
2. 需要 init playListView -> 集合获取开始
3. 到 startView 的路线
4. playListView 获取返回 -> 集合现在已填充
5. 单击链接-> 正确渲染 playListView
当你通过时http://example.com/#/playlist：
1. 需要初始化 startView
2. 需要 init playListView -> 集合获取开始
3. 路由到 playListView -> 不正确地渲染 playListView，因为集合仍在获取（也就是没有可循环的内容）
4. 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，而必要的东西仍然没有加载。

score 0 · Accepted Answer

在 MVC 模式中，视图响应模型的变化。您在代码中进行了以下设置：

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

但问题是您不会导致重置，这反过来会导致您的视图重新渲染。因此，不要在“播放列表”中调用渲染方法，而是将集合的 url 更改为适当的 REST 端点，然后执行 collection.fetch。一旦你进行了获取，将触发一个“重置”，然后你的渲染将被调用，正确地反映更新的集合。

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

3 回答 3

Related

Reference