Question

嘿，我是骨干和把手的新手，我的代码无法弄明白的事情发生了什么奇怪的事。基本上我的节点应用程序向mongo查询一些数据，然后由主干和把手用来将数据传递给用户。当我尝试使用fetch方法将数据中继给用户时，我从句柄中得到一个错误，指出我无法调用compile方法，因为我传递了undefined。奇怪的是，当我调试代码时，似乎从未创建集合，即没有从后端返回数据。但是当我试图提醒集合时，数据确实会被返回并显示，这真的令人困惑？无论如何，下面是我的代码的几个片段，很想知道为什么会发生这种情况，谢谢。

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

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

photoClient.js 用于定义和管理模型，集合＆amp;视图

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 Collection仅在执行警报后获取

1 个答案: