2012-07-19 54 views
0

我已經fetch()由服務器模型,我想呈現的fetch()結果,以期。如何插入取模型的結果在一個視圖

fetch()的結果是一組對象(var risultati),我想渲染這var risultati。我試過了,但沒有任何效果。

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "": "list", 
    }, 
    initialize: function() {}, 
    list: function() { 
     var utente = new Person(); 
     var risultati; 
     utente.fetch({ 
      success: function (data) { 
       var ris = data.attributes; 
       var risultati = ris.results; 
       console.log(risultati); /* risultati contains array of object to render*/ 
      } 
     }); 
     this.page = new UserListView({ 
      model: this.utente 
     }); 
     $('body').append(this.page.$el); 
    } 
}); 

回答

1

你可能有,因爲您的來電顯示視圖從您的通話utente.fetch()出現不同的問題。

由於.fetch()是異步的,以前.fetch()已完成您的視圖代碼就會被執行。您應該將視圖創建/渲染添加爲成功函數的一部分,或者您應該綁定更新模型時發生的更改事件以觸發包含視圖創建的新函數。

+1

或者更好,'UserListView'應該綁定到模型的'「變」'事件及其'render'應該足夠聰明來處理一個空的模型或填充的模型。 – 2012-07-19 17:56:43

0

你應該分開你的MVC邏輯......不重視的對象(集合我認爲)到路由器的路由處理。
假設你正在試圖呈現人車型的集合,我建議你使用有關人員,並收集和處理「對象數組」視圖模型和視圖:

var Person = Backbone.Model.extend({ 
     initialize : function(){ 
      // initialize the view 
      this.view = new PersonView({model : this}); 
     } 
    }), 
    PersonView = Backbonke.View.extend({ 
     render : function(){ 
      // render your person 
     } 
    }), 
    UserList = Backbone.Collection.extend({ 
     model : Person, 
     initialize : function(){ 
      this.view = new UserListView({ 
        collection : this 
      }); 
     }, 
     update : function(){ 
      var self = this; 
      this.fetch({ 
       success: function (data) { 
        var ris = data.attributes; 
        var risultati = ris.results; 
        console.log(risultati); /* risultati contains array of object to render*/    self.view.render(); 
       } 
      }); 
     } 
    }), 
    UserListView = Backbone.View.extend({ 
     render : function(){ 
      this.collection.each(function(el,i){ 
       el.view.render(); 
      }); 
     } 
    }); 

,然後使用它作爲:

var page = new UserList(); 
var AppRouter = Backbone.Router.extend({ 
    routes: { 
     "": "list", 
    }, 
    initialize: function() {}, 
    list: function() { 
     page.update(); 
    } 
}); 

希望這有助於!

相關問題