バックボーンフェッチモデルからレンダービューへ

Question

モデルでフェッチ操作を実行すると、目的のデータをJSON形式で返すAPIが表示されます。モデルをコンソールに記録すると、変更されたオブジェクトに新しいデータが表示されます。

前とフェッチ後：

Object { 
    cid: "c1", 
    attributes: Object, 
    _changing: false, 
    _previousAttributes: Object, 
    changed: Object, 
    id: undefined, 
    _pending: false 
} 

Object { 
    cid: "c1", 
    attributes: Object, 
    _changing: false, 
    _previousAttributes: Object, 
    changed: Object[1], 
    id: undefined, 
    _pending: false 
} 

データは明らかにフェッチされ、それがモデルに存在しています。ただし、レンダリングすると、デフォルト値が表示されます。

App.Models.Document = Backbone.Model.extend({ 

    defaults: { 
    id: '', 
    owner: 0, 
    created: '', 
    lastupdate: '', 
    content: 'Default document content' 
    }, 

    url: '/api/' 

}); 


App.Views.DocumentView = Backbone.View.extend({ 

    tagName: 'textarea', 
    className: 'editor', 

    template: App.Template('editortemplate'), 

    initialize: function() { 

    // As proposed in so many similar questions 
    this.listenTo(this.model, "change", this.render); 

    }, 
    render: function() { 

    this.$el.html(this.template(this.model.toJSON())); 

    $(".app-content").html(this.$el); 

    return this; 

    } 
}); 


a = new App.Models.Document(); 
a.fetch(); 
b = new App.Views.DocumentView({ model: a }); 
b.render(); 

新しいデータでビューを正しく更新するにはどうすればよいですか？

モデルからデフォルトを削除すると、 'content'は定義されません。

Answer 1

Backbone.Modelは、オブジェクトがサーバーではなく、配列から返されることを期待しています。コレクションの場合は配列を返す必要があります。

だからあなたの場合には、データを含むオブジェクトを返すようにparseメソッドを定義する必要があります。

App.Models.Document = Backbone.Model.extend({ 
    defaults: { 
    owner: 0, 
    created: '', 
    lastupdate: '', 
    content: 'Default document content' 
    }, 
    url: '/api/', 
    parse: function(response) { 
    return response[0]; 
    } 

}); 

Answer 2

モデル上でバックボーンsyncイベントを聞くことができます。 sync火災サーバー

this.listenTo(this.model, 'sync', this.render); 

の呼び出しが成功した後も、あなたのモデルはinitializeメソッドでは、App.Views.DocumentViewにフェッチ移動することができます。成功した場合にビューをレンダリングし、より ：

App.Models.Document = Backbone.Model.extend({ 
    defaults: { 
    id: '', 
    owner: 0, 
    created: '', 
    lastupdate: '', 
    content: 'Default document content' 
    }, 

    url: '/api/' 
}); 


App.Views.DocumentView = Backbone.View.extend({ 
    tagName: 'textarea', 
    className: 'editor', 
    template: App.Template('editortemplate'), 
    initialize: function() { 
    var self = this; 

    // model fetch 
    this.model.fetch({ 
     success: function() { 
     // call render 
     self.render(); 
     }, 
     error: function() { 
     // handle error 
     } 
    }); 

    // As proposed in so many similar questions 
    this.listenTo(this.model, "change", this.render); 
    }, 
    render: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    $(".app-content").html(this.$el); 
    return this; 
    } 
}); 


var myModel = new App.Models.Document(); 
var myView = new App.Views.DocumentView({ 
    model: myModel 
}); 
myView.render();