3

我目前正在使用 Backbone.js，并且在处理 JSON 和输出它时遇到了问题。

我遇到的问题是，如果我的 JSON 文件中只有一个条目，我的代码运行得很好。但是，如果我添加第二个或更多，代码会触发错误函数。

我试过检查我的 JSON 格式，它返回有效。这是代码：

var Post = Backbone.Model.extend({
    defaults: {
        title: null,
        img: null,
        slug: null,
        excerpt: null,
        type: null
    },
});

var Posts = Backbone.Collection.extend ({
    model: Post,
    url: "/json/postCollection.json",
    parse: function(resp, xhr) {
        console.log(resp)
        return resp;
    }
});

allPosts = new Posts();

PostView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, "render");
        this.status = new Posts( null, { view: this });
        this.status.bind("reset", this.render);
        this.getPosts();
    },
    getPosts: function() {
        this.render(this.status.fetch({ 
            success: function(data){
                return(data);
            },
            error: function(){
                console.log('Failed to load postCollection');
            }
        }));
    },
    render: function() {
        var el = $('.posts');
        this.status.each( function(model) {
            var postTemplate = model.get('type')+"Template";

            var variables = { 
                title: model.get('title'), 
                img: model.get('img'), 
                type: model.get('type'),
                excerpt: model.get('excerpt'),
                slug: model.get('slug') 
            };

            console.log(variables);

            var template = _.template( $("#"+postTemplate).html(), variables );

            el.append( template );
        });
    }
});

var post_view = new PostView();

还有我的 JSON：（同样，如果我只有一个条目，上面的 JS 可以工作）

[
    {
        "title": "Entry Title 1",
        "img": "image.gif",
        "slug": "entry-1",
        "excerpt": "lorem",
        "type": "casestudy"
    },
    {
        "title": "Entry Title 1",
        "img": "image.gif",
        "slug": "entry-1",
        "excerpt": "lorem",
        "type": "casestudy"
    }
]

编辑（已解决）：

谢谢数据库管理员！

你指出了我找到问题的正确方向。我正在使用流浪者设置和防案灯箱。默认配置没有设置 JSON MIME 类型。

解决方案是将 SSH 连接到框中，然后将以下行添加到我的 /etc/mime.types：

application/json json

在 JSON 文件作为纯文本传输之前。对于任何有类似问题的人，如果您想检查 javascript 中的 mime 类型，请使用：

var req = new XMLHttpRequest();
req.open('GET', "/json/postCollection.json", false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
alert(headers);
4

1 回答 1

0

Javascript 是异步的，因此当您调用 return getPosts 回调时，它会从该闭包返回数据，而不是您的外部函数。你需要像这样嵌套你的渲染调用。

 PostView = Backbone.View.extend({
    initialize: function() {
         _.bindAll(this, "render");
         this.status = new Posts( null, { view: this });
         this.status.bind("reset", this.render);
         this.getPosts();
    },
    getPosts: function() {
         var self = this;
         this.status.fetch({ 
             success: function(data){
                 self.render(data);
             },
             error: function(){
                 console.log('Failed to load postCollection');
             }
         }));
    },
    render: function() {
         var el = $('.posts');
         this.status.each( function(model) {
         var postTemplate = model.get('type')+"Template";

         var variables = { 
            title: model.get('title'), 
            img: model.get('img'), 
            type: model.get('type'),
            excerpt: model.get('excerpt'),
            slug: model.get('slug') 
         };

        console.log(variables);

        var template = _.template( $("#"+postTemplate).html(), variables );

        el.append( template );
    });
}
});
于 2013-03-19T12:50:48.523 回答