Question

我目前正在玩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"
    }
]

编辑（已解决）：

谢谢dbaseman！

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

解决方案是SSH进入框中，并将以下行添加到我的/etc/mime.types中：

application/json json

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

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

Answer 1

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 );
    });
}
});

如果我有超过1个JSON组，则会出现主干错误

1 个答案: