3

私は現在 Backbone.js をいじっていますが、JSON の処理と出力で問題が発生しました。

私が抱えている問題は、JSON ファイルにエントリが 1 つしかない場合でも、コードが正常に実行されることです。ただし、1 秒以上追加すると、コードはエラー関数を起動します。

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：（ここでも、エントリが1つしかない場合、上記の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は非同期なので、 getPosts コールバックを呼び出すと、外部関数ではなくそのクロージャーからデータが返されます。このように render 呼び出しをネストする必要があります。

 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 に答える