Elegant way to wrap multiple Backbone render methods to avoid “before” and “after” event duplication?

I've divided the render() method on my View into two separate methods, in order to allow me to render the entire View, or just a small portion of the View, which is represented by an HTML form. The two render() methods look as such:

    render: function () {
        var templateData = _.extend({}, this.model.attributes, localizedText),
            compiledLoadStopTemplate = Handlebars.compileClean(template);

        this.isClosed = false;

        this.triggerMethod("before:render", this);
        this.triggerMethod("item:before:render", this);

        this.$el.html(compiledLoadStopTemplate(JSON.parse(JSON.stringify(templateData))));
        this.renderAppointmentForm();

        this.bindUIElements();

        this.showStatusNotification();

        this.triggerMethod("render", this);
        this.triggerMethod("item:rendered", this);

        return this;
    },
    renderAppointmentForm: function () {
        var templateData = _.extend({}, this.model.attributes, localizedText, { notification: this.notification }),
            compiledAppointmentFormTemplate = Handlebars.compileClean(appointmentFormTemplate);

        this.triggerMethod("before:render", this);
        this.triggerMethod("item:before:render", this);

        this.$el.find(".hook-appointment-form-container").html(compiledAppointmentFormTemplate(JSON.parse(JSON.stringify(templateData))));

        this.bindUIElements();

        this.showStatusNotification();

        this.triggerMethod("render", this);
        this.triggerMethod("item:rendered", this);

        return this;
    },

Now, there's obviously a boatload of duplicated code here; while the template data, template, and actual html() call are unique, almost all of the other lines are common between them.

It'd be nice to have a wrapped method that would allow me to supply the template data, compiled template, and html() lines, and automatically have the rest of the other before/after-firing methods in place universally, but I couldn't devise a method using Underscore's wrap() that really worked.

I'm sure there's a more advanced programming concept that fits this need perfectly, but it's avoiding my grasp right now.

Answers


What about extracting form in separate view? If its not possible then I have this suggestion:

loadStopTemplate: Handlebars.compileClean(template),

appointmentFormTemplate: Handlebars.compileClean(appointmentFormTemplate),

getTemplateAttributes: function () {
    var attributes = _.extend({}, this.model.attributes, localizedText, { notification: this.notification });
    return JSON.parse(JSON.stringify(attributes))
},

render: function () {
    this.isClosed = false;
    return this.enterRenderState(function (attributes) {
        this.$el.html(this.loadStopTemplate(attributes));
        this._renderForm(attributes);
    })
},

renderAppointmentForm: function () {
    return this.enterRenderState(this._renderForm)
},

_renderForm: function (attributes) {
    this.$('.hook-appointment-form-container')
        .html(this.appointmentFormTemplate(attributes))
    return this;
},

enterRenderState: function (callback) {
    this.triggerMethod("before:render", this);
    this.triggerMethod("item:before:render", this);
    callback.call(this, this.getTemplateAttributes());
    this.bindUIElements();
    this.showStatusNotification();
    this.triggerMethod("render", this);
    this.triggerMethod("item:rendered", this);
    return this
}

Need Your Help

Tests run from command line but not in RubyMine - No tests were found

ruby-on-rails ruby testing rubymine rake-test

I am trying to use RubyMine to run the tests in an existing project. Unfortunately, whenever I attempt to do so I receive the message that No tests were found and the bottom of test console output ...

Backbone template not rendering in IE8

javascript jquery internet-explorer backbone.js internet-explorer-8

I have an application that uses Backbone.js to render views and insert content from mustache templates. It works fine in all browsers except IE8 and lower.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.