Backbone view for logging a user in

Question

I'm looking for a general peer review on already working code. Just the overall structure and of course any gotchas like DRYness or logic issues.

var AccountExistView = Backbone.View.extend({
    Name: 'AccountExistView',
    el: $('#ue1_box'),
    E: {

        ue1_box:        '#ue1_box',

        // labels
        ue1_email_lab:  '#ue1_email_lab',
        ue1_pass_lab:   '#ue1_pass_lab',

        // inputs
        ue1_email:      '#ue1_email',
        ue1_pass:       '#ue1_pass',
        ue1_but:        '#ue1_but',

        // button cover 
        ue1_rc:         '#ue1_but_cov',

        // response box and text
        ue1_rb:         '#ue1_rb',
        ue1_rt:         '#ue1_rt',

        // form
        ue1_fo:         '#ue1_fo'
    },
    initialize: function () {
        var self = this;
        $A.morph(this.E, $A.el);
        Backbone.on('main_flipped', function () {
            Message.resetInput([self.E.ue1_email, self.E.ue1_pass]);
        });
        Input.set([ this.E.ue1_email, this.E.ue1_email_lab,
                    this.E.ue1_pass, this.E.ue1_pass_lab
                  ]);
        _.bindAll(this, '_post');
    },
    events: {
        "click #ue1_but"                 : "clicked",
        "keypress #ue1_pass"             : "keypress"
    },
    clicked: function (event) {
        this._pre();
    },
    keypress: function (event) {
        if (event.keyCode === 00) {
            this._pre();
        }
    },
    args: {},
    valid_client: ['email', 'pass'],
    valid_server: ['s_email', 's_pass', 's_validate'],
    _pre: function () {

        // declarations
        var opts_save = {},
            attrs = {},
            jqxhr,
            account_row,
            self = this;

        // setup args for messaging to user
        this.args.input_element = this.E.ue1_pass;
        this.args.cover_element = this.E.ue1_rc;
        this.args.response_element = this.E.ue1_rt;
        this.args.pane_element = this.E.ue1_rb;
        this.args.form = new Form(this.E.ue1_fo.elements);
        this.args.model = this;

        // attributes for the creation model
        attrs = this.args.form.getObj();
        attrs.model = 'AccountExist';

        // create BMAccount and set event handler
        account_row = new BMAccount(attrs, {request: 'save'});
        account_row.on("invalid", function (model, error) {
            self.args.state = error;
            Message.sliding(self.args);
        });

        // setup the options
        opts_save.form = this.args.form;
        opts_save.validate = this.valid_client;
        opts_save.success = function (model, response, options) {
            self._post(model, response, options);
        };
        opts_save.error = function (model, response, options) {
            self._post(model, response, options);
        };

        // "save" the model to Database
        account_row.save(attrs, opts_save);
    },
    _post: function (model, response, options) {
        var composite_view;
        if (_.contains(this.valid_server, response)) {
            this.args.state = response;
            Message.sliding(this.args);
        } else {
            Storage.setRemembered(response);
            composite_view = $A.Class.add(new BVComposite());
            composite_view.render(response);
            Page.flip('main');
        }
    }
});

$A.Class.add(new AccountExistView());

Answer 1

Structurally, you did a good job of breaking up your code into different methods, though their naming seems a bit strange. What is pre and post referring to?

The main thing I see is that the code could be a bit more succinct if you used the object literal form for setting up your arguments and options:

For example:

// setup args for messaging to user
this.args.input_element = this.E.ue1_pass;
this.args.cover_element = this.E.ue1_rc;
this.args.response_element = this.E.ue1_rt;
this.args.pane_element = this.E.ue1_rb;
this.args.form = new Form(this.E.ue1_fo.elements);
this.args.model = this;

cold be:

    this.args = {
        input_element: this.E.ue1_pass,
        cover_element: this.E.ue1_rc,
        response_element: this.E.ue1_rt,
        pane_element: this.E.ue1_rb,
        form: new Form(this.E.ue1_fo.elements),
        model: this
    }