Re-render a view

Question

What is the best way to re-render a view after an event takes place (eg. submitting a note). In the below code, I want to re-render the view to show the note that was just added.

var NotesView = SectionBaseView.extend({
        model: app.models.Note,
        events: {
            'submit': 'Notes'
        },
        Notes: function (e) {
            e.preventDefault();

            var details = new this.model($('form').serializeObject());
            details.url = '/email/Notes';

            details
                .save()
                .done(function () {                
                    app.notifySuccess('Note added successfully.');
                });           
            views['#Notes'].render();                    
        }       
    });

Notes view is initialized in the document.ready function as follows:

views['#Notes'] = new NotesView({ el: '#Notes', template: app.templates.Notes });

I tried using views['#Notes'].render(); but this doesn't seem to be working.

Answer 1

The default implementation of render is a no-op. Override this function with your code that renders the view template from model data, and updates this.el with the new HTML. A good convention is to return this at the end of render to enable chained calls. Docs

var NotesView = SectionBaseView.extend({
        model: app.models.Note,
        events: {
            'submit': 'Notes'
        },

        render : function(){
              //your code
              return this;
        },

        Notes: function (e) {
            var that = this;
            e.preventDefault();

            var details = new this.model($('form').serializeObject());
            details.url = '/email/Notes';

            details
                .save()
                .done(function () {                
                    app.notifySuccess('Note added successfully.');
                });           
            that.render();                    
        }       
    });

on document.ready

views['#Notes'] = new NotesView({ el: '#Notes', template: app.templates.Notes });
views['#Notes'].render();