0

我已经将render()我的 View 上的方法分成两个单独的方法，以便让我渲染整个 View，或者只是 View 的一小部分，它由 HTML 表单表示。这两种render()方法看起来像这样：

    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;
    },

现在，这里显然有一大堆重复的代码；虽然模板数据、模板和实际html()调用是唯一的，但它们之间几乎所有其他行都是通用的。

最好有一个包装的方法，它可以让我提供模板数据、编译的模板和html()行，并自动将其余的其他前/后触发方法通用，但我无法设计使用下划线的方法wrap()确实有效。

我确信有一个更高级的编程概念可以完美地满足这种需求，但它现在正在避免我的掌握。

4

2 回答 2

2

在单独的视图中提取表单怎么样？如果不可能，那么我有这个建议：

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
}
于 2013-05-02T06:36:00.913 回答
1

一种可以轻松重构的方法是创建一个辅助函数来执行所有常见功能，然后只为不同的部分传递一些函数。

例如

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

    var isClosed = function () {
        self.isClosed = false;
    }

    var renderHTML = function () {

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

    }

    return this.renderHelper(renderHTML, isClosed);
}

renderAppointmentForm: function () {

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

    var renderHTML = function () {
        self.$el.find(".hook-appointment-form-container").html(compiledAppointmentFormTemplate(JSON.parse(JSON.stringify(templateData))));
    }

    return this.renderHelper(renderHTML);
}


renderHelper: function (renderHTML, isClosed) {

    if (isClosed) {
        isClosed();
    }

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

    renderHTML();

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

    return this;

}
于 2013-05-01T23:11:32.700 回答