骨幹提取模型然後渲染視圖

Question

在模型上執行提取操作時，我可以看到API以JSON格式返回所需的數據。記錄模型的控制檯在「更改」對象中顯示新數據。

前後取：

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

您可以聽聽模型上的Backbone sync事件。成功調用服務器

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

後sync火災您也可以將您的模型提取到App.Views.DocumentView，在initialize方法。 比，成功渲染視圖：

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