Backbone-Fetch-Modell, dann Render-Ansicht

Question

Wenn ich den Abrufvorgang für ein Modell durchführe, kann ich sehen, dass die API die gewünschten Daten im JSON-Format zurückgibt. Die Konsolenprotokollierung des Modells zeigt die neuen Daten in einem "geänderten" Objekt an.

Vor und nach fetch:

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 
} 

Die Daten offensichtlich wird, abgerufen, und es ist im Modell vorhanden sind. Beim Rendern werden jedoch die Standardwerte angezeigt.

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

Wie aktualisiere ich die Ansicht ordnungsgemäß mit den neuen Daten?

Wenn ich die Standardwerte aus dem Modell entferne, ist 'Inhalt' nicht definiert.

Answer 1

Backbone.Model ein Objekt erwartet vom Server zurückgegeben werden, kein Array. Ein Array sollte im Falle einer Sammlung zurückgegeben werden.

Also in Ihrem Fall benötigen Sie eine parse Methode zu definieren, die Daten, die das Objekt zurückzugeben, enthält:

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

Sie können auf das Backbone sync Ereignis auf dem Modell hören. sync Brände nach einem erfolgreichen Aufruf an den Server

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

Auch können Sie Ihr Modell App.Views.DocumentView, in der Methode initialize holen bewegen. als auf Erfolg machen Sie die Ansicht:

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