0

私はいくつかのチュートリアル コードに取り組んでいますが、ほとんどのチュートリアル コードと同様に、「json」オブジェクトは、javascript ファイル内に単純なオブジェクトとして追加することで偽装されています。代わりに、サーバーでホストされているファイルから JSON を取得しようとしています。私はこれをもう少し現実的にしようとしています。それにもかかわらず、バインディングを機能させることができないようです。

私のデモコード（私は動作しています）ですが、javascript内に「json」オブジェクトがある場合は、ここで見ることができます.

動作するjsfiddle

私の希望の作品はここで見ることができます。

ないjsfiddle

私のリモート json はjson ファイルにあります。私の 2 つのフィドルを "フォーク" すると、テスト用のテスト ハーネス (バックボーン、アンダースコア、すべてオンボードの jquery) があります。

私の問題の核心は、「コレクション」とコレクションを使用する「ビュー」にあると思います。

var Contacts = Backbone.Collection.extend({
    model: Contact,
    url: 'http://sturim.me/contacts.json',
    parse: function(data) {
        return data.objects;
    }            
});

//define master view
var ContactsView = Backbone.View.extend({
    el: $("#contacts"),

    initialize: function() {
        this.collection = new Contacts();
        this.collection.fetch();
        this.render();
    },

    render: function() {
        this.$el.find("article").remove();
        _.each(this.collection.models, function(item) {
            this.renderContact(item);
        }, this);
    },

    renderContact: function(item) {
        var contactView = new ContactView({
            model: item
        });
        this.$el.append(contactView.render().el);
    }

});
4

1 に答える 1

2

まず、2 番目の jsfiddle は、ブラウザーのセキュリティの制限により機能しません。jsfiddle 内から個人のドメインを照会することはできません。

第二に、あなたのContacts parse関数でdataは、ファイルの内容を含む文字列であるため、その応答をオブジェクトに変換するのはあなた次第です。

parse: function(data) {
    return JSON.parse(data).objects;
}

最後にfetch、非同期リクエストであるため、ロジックはリクエストが完了する前にレンダリングを試みます。ビューでトリガーされたイベントに基づいてレンダリングする必要があります。

initialize: function() {
    this.collection = new Contacts();

    // When the contents of the collection are set, render the view.
    this.collection.on('reset', function(){
        this.render();
    }, this);

    this.collection.fetch();
},
于 2012-10-09T04:04:04.193 に答える