Question

I’m working on creating a validation view using backbone that will handle the display of the validation message in a styled balloon over a given input. I have created a new view which handles this functionality. To perform the validation AND render the view I have setup the following function inside of my model.

   Dashboard.Models.EventModel = Backbone.Model.extend({
    idAttribute: "Id",

    // Model Service Url
    url: function () {
        var base = 'apps/dashboard/EventsDetails';
        return (this.isNew()) ? base : base + "/" + this.id;
    },

    validate: function (attrs) {
        var validTime = (attrs.Time) ? attrs.Time.match(/^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/) : true;

        if (!validTime) {
            new Dashboard.Views.ValidationMessageView({
                $container: $('#txtNewEventTime'),
                message: 'Invalid Time'
            }).render();

                    return 'error';
        };

    }

});

My question: Is it against standards to create that new view (ValidationMessageView) and render it from within a model?

Answer 1

IMHO: yes!.. it doesn’t look very nice.

You should instantiate the View outside the Model.

You should bind the event error in the Model, capture it from outside and instantiate the ErrorView there.

Check the example in the Model.validate documentation

In a fast though you can have a AllErrorsView like this:

// code simplfied and not tested
var AllErrorsView = Backbone.View.extend({
  initialize: function(){
    this.model.on( "error", this.showError, this );
  },

  showError: function( model, error ){
    if( error == "txt_new_event_time" ) {
      new Dashboard.Views.ValidationMessageView({
        el:         "#txtNewEventTime",
        message:    "Invalid Time"
      }).render();
    }

    // ... more errors
  }

});

var myAllErrorsView = new AllErrorsView({ model: myModel });

I have to say that is not the only weird thing I see in your code. For example I don’t understand the meaning of your Model.url implementation, I think you can solve it with Model.urlRoot attribute.