javascript - 重新渲染视图

Question

事件发生后重新渲染视图的最佳方式是什么（例如提交注释）。在下面的代码中，我想重新渲染视图以显示刚刚添加的注释。

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 视图在 document.ready 函数中初始化如下：

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

我尝试使用 views['#Notes'].render(); 但这似乎不起作用。

Answer 1

渲染的默认实现是无操作。使用从模型数据呈现视图模板的代码覆盖此函数，并使用新的 HTML 更新 this.el。一个好的约定是在渲染结束时返回 this 以启用链式调用。文档

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

在 document.ready 上

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