渲染視圖中的骨幹子視圖

Question

我的問題是圍繞使用Backbone來查看渲染視圖的最佳方式。

雖然圍繞這個話題有很多博客，但是我一直沒有找到任何可以應用到這個用例的實用想法。

背景故事

在頁面加載，骨幹獲取並呈現遙控模型和遠程頁面模板。

頁面模板由3個字段組成，每個字段包含大量只讀數據和圖像，並帶有一個[編輯]按鈕。

+-----------------------+ +-----------------------+ 
| ID: ViewA    | | ID: ViewB    | 
|      | |      | 
|      | |      | 
|     EDIT | |     EDIT | 
+-----------------------+ +-----------------------+ 
+-----------------------+ 
| ID: ViewC    | 
|      | 
|      | 
|     EDIT | 
+-----------------------+ 

當[編輯]被用戶點擊時，我想創建的子圖，（下劃線模板）中取出的部分，施加到其現有的模型，最後，它來替換字段集的innerHTML 。

這將使先前只讀字段集中的內容可由用戶編輯和保存。一旦用戶保存（或取消），它應該推回到服務器，並重新呈現只讀視圖。

爲了討論起見，假設模板在/模板/編輯託管/ < fieldsetid>的.html

這裏是現有代碼：

型號和款式

// Model 
window.Page = Backbone.Model.extend(); 

// Collection 
window.PageCollection = Backbone.Collection.extend({ 
    model: Page, 
    url: '/page/view.json' 
}); 

The View

window.PageView = Backbone.View.extend({ 

    initialize:function() { 
     this.model.bind("reset", this.render, this); 
    }, 

    events:{ 
     'click fieldset a[role=edit-fieldset]' : 'edit' 
    }, 

    edit: function(e){ 
     e.preventDefault(); 
     // @TODO Do some subview awesomeness here? 
    }, 

    render:function (eventName) { 
     _.each(this.model.models, function (data) { 
      $(this.el).append(this.template({data: data.attributes})); 
     }, this); 
     return this; 
    } 

}); 

路由器

var AppRouter = Backbone.Router.extend({ 
    routes:{ 
     "page/view":"pageView" 
    }, 
    pageView:function (action) { 
     this.page = new PageCollection(); 
     this.pageView = new PageView({model:this.page}); 
     this.page.fetch(); 
     $('#content').html(this.pageView.render().el); 
    } 
}); 

模板裝載機

// Borrowed from: 
// http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/ 
// Should probably move to RequireJS and AMDs 

utils.loadTemplate(['PageView'], function() { 
    var app = new AppRouter(); 
    Backbone.history.start(); 
}); 

所以考慮到這一點，你有什麼想法？我在正確的軌道上嗎？我應該看看另一種模式嗎？

在此先感謝。

Answer 1

我通常處理這些情況的方法如下（使用現有的「loadTemplate」，頁以上PageCollection架構）：

// Model 
window.Page = Backbone.Model.extend(); 

// Collection 
window.PageCollection = Backbone.Collection.extend({ 
    model: Page, 
    url: '/page/view.json' 
}); 

window.PageView = Backbone.View.extend({ 

    template: templates.pageViewTemplate, 

    render: function() { 
     var html = this.map(function(model) { 
      // Important! We don't need to store a reference to the FieldSetViews. 
      // Simply render them and by passing in the model, we can update the view 
      // as needed when the model changes. 
      // 
      // This is also good to reduce the potential for memory-leaks. 
      return new FieldSetView({ 
       model: model 
      }).render(); 
     }); 

     // Do one DOM update. 
     this.$el.html(html); 

     return this.$el; 
    } 
}); 

window.FieldSetView = Backbone.View.extend({ 

    events: { 
     "click .edit": "_onEdit" 
    }, 

    template: templates.fieldSetTemplate, 

    render: function() { 
     // Replace the top-level div created by backbone with that of your 
     // template (i.e fieldset). This gets around having to use 
     // the tagName property which should really be in your template. 
     this.setElement(this.template.render(this.model.toJSON())); 

     return this.$el; 
    }, 

    _onEdit: function(e) { 
     // Handle edit mode here by passing the model to another view 
     // or by enhancing this view to handle both edit and view states. 
    } 

});