Backbone 仅在执行警报后获取集合

Question

嘿，我是 backbone 和 Handlebars 的新手，我的代码发生了一些我无法理解的奇怪事情。基本上我的节点应用程序查询 mongo 一些数据，然后 backbone 和车把使用这些数据将数据中继给用户。当我尝试使用 fetch 方法将数据中继给用户时，我从 handlebars 收到一个错误，指出我无法调用 compile 方法，因为我传递了未定义的。奇怪的是，当我调试代码时，似乎从未创建过集合，即没有从后端返回数据。但是当我试图提醒集合时，数据确实会返回并显示，这真的很令人困惑吗？不管怎样，下面是我的代码的一些片段，很想知道为什么会这样，谢谢。

Init.js - 用于初始化 backbone 路由器

$(function(){
new appRouter();
Backbone.history.start({pushState: true});
});

photoClient.js 用于定义和管理模型、集合和视图

var photo = Backbone.Model.extend({
idAtrribute: "id",
});

var photoCollection = Backbone.Collection.extend({
model: photo,
url: "/api/gallery"

  });

var photoView = Backbone.View.extend({

tagName: "li",
className: "photo",
render: function(){
    var template = $("#illustrationTemplate").html();
    var compiled = Handlebars.compile(template);
    var html = compiled(this.model.attributes);
    this.$el.html(html);
    return this;

   }
 });

 var photoCollectionView = Backbone.View.extend({
 initialize: function(){
    this.listenTo(this.collection, "reset", this.render);
 },
 tagName: "ul",
 className: "photos",
 render: function(){
    this.$el.html("");
    this.collection.each(function(photo){
        var photoV = new photoView({model: photo});
        this.$el.append(photoV.render().el);
    }, this);
    return this;
  }
 });

 var appRouter = Backbone.Router.extend({
 routes: {
 "gallery": "illustration"
 },
 illustration: function() {
    var collection = new photoCollection();
    collection.fetch({reset: true});
    //IF I ADD THIS ALERT THE COLLECTION IS NOW DEFINED?
    alert(collection);
    console.log(collection);
    var view = new photoCollectionView({collection: collection});
    $(".app").html(view.render().el);   
 }
});

Illustration.jade

extends ../layout
block content
div.app
  script(id = "illustrationTemplate", type = "text/x-handlebars")
    {{image.created_at}}

Answer 1

我猜问题就出在这里：

$(".app").html(view.render().el);

一旦你这样做，<div class="app"> 里面的所有东西都消失了。这包括您用来存储模板的 <script id="illustrationTemplate">。一旦您的路由器的 illustration 方法被调用，$("#illustrationTemplate").html() 将给您 undefined 并且该视图将不再有效。

您应该将您的模板存储在 <head> 中，或者至少在您的应用程序将要写入的任何内容之外。

Backbone 仅在执行警报后获取集合

Backbone Collection only fetched after executing alert

node.js

express

backbone.js

handlebars.js

pug