backbone + layoutmanager (backbone-boilerplate)集合在beforeRend

Question

我在一个项目上测试这个骨干样板(https://github.com/tbranyen/backbone-boilerplate)，但我有一个问题，以呈现视图。我第一次调用beforeRender时，集合(pics)是空的，因为Flickr照片的获取仍在进行中。但是当数据被加载时，我可以在我的图片的"解析"函数中看到它们。集合(带有断点)，我的视图的beforeRender永远不会再被调用。

My router.js:

 define([
    // Application.
    "app",
    "modules/pics"
],
function(app, HomePage, Pics) {
    // Defining the application router, you can attach sub routers here.
    var Router = Backbone.Router.extend({
        initialize: function() {
            // Init collections
            var collections = {
                pics: new Pics.Collection()
            };
            console.log('collec');
            // Register in the router
            _.extend(this, collections);
        },
        routes: {
            "": "pics"
        },
        pics: function() {
            this.reset();
            app.useLayout().setViews({
                "#content": new Pics.Views.List({ pics: this.pics }),
                "header": new Backbone.View({
                    tagName: "span",
                    beforeRender: function() {
                        this.$el.html("Header Pics");
                    }
                })
            }).render();
            this.pics.fetch();
        },
        reset: function() {
            if (this.pics.length) {
                this.pics.reset();
            }
        }
    });
  return Router;
});

我的模块，pic .js:

define([
    "app"
], function(app) {
    var Pics = app.module();
    Pics.Model = Backbone.Model.extend({ });
    Pics.Collection = Backbone.Collection.extend({
        model: Pics.Model,
        url: function() {
            return "http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?";
        },
        cache: true,
        parse: function(obj) {
            return obj.items;
        }
    });
    Pics.Views.Item = Backbone.View.extend({
        template: "pics/item",
        tagName: "li",
        serialize: function() {
            return { model: this.model };
        },
        initialize: function() {
            this.listenTo(this.model, "change", this.render);
        }
    });
    Pics.Views.List = Backbone.View.extend({
        template: "pics/list",
        serialize: function() {
            return { collection: this.options.pics };
        },
        beforeRender: function() {
            this.options.pics.each(function(pic) {
                this.insertView("#pics-list", new Pics.Views.Item({
                    model: pic
                }));
            }, this);
        },
        initialize: function() {
            this.listenTo(this.options.pics, {
                "reset": this.render(),
                "request": function() {
                    this.$("ul").parent().html("<img src='/app/img/spinner-gray.gif'>");
                }
            });
        }
    });
    return Pics;
});

list.html (template):

<h1>Liste des photos</h1>
<div>
    <div class="loading"></div>
    <ul id="pics-list"></ul>
</div>

item.html (template):

<li>
    <img src="<%= model.get("link") %>" />
</li>

index . html:

<main role="main" id="main">
      <nav>
          <ul>
              <li><a href="">Home</a></li>
          </ul>
      </nav>
      <header></header>
      <aside></aside>
      <section id="content"></section>
      <footer>
          Copyright 2013
      </footer>
  </main>

我搜索是否存在一个现有的问题，在论坛和我自己已经两天了，但我找不到什么是错的。

提前谢谢你，Pierrick。

Answer 1

我发现问题了，听"sync"事件而不是"change"