Getting 'type' of a View's model

Question

you can access View's model from the View methods - like render() (through its model property). But let's say you have many different models and use the them with the same type of View, changing view's model property when you need.

How can you determine from the View what type of the model it's using?

var Model1 = Backbone.Model.extend();
var Model2 = Backbone.Model.extend();

var MyView = Backbone.View.extend({
  render:function(){
    console.log(" you're using: "+ model); // how to determine here is it using Model1 or Model2
  }
})

var mv1 = new MyView({model: new Model1()})
var mv2 = new MyView({model: new Model2()})

Answer 1

Objects have identity, not name. If you want to know the name of the constructor that created an object (which can be considered the object's type; see the ECMAScript Specification), the bullet-proof approach is to make that information part of the constructed object:

var Model1 = Backbone.Model.extend({type: "Model1"});
var Model2 = Backbone.Model.extend({type: "Model2"});

var MyView = Backbone.View.extend({
  render: function () {
    console.log("You are using " + this.model.type);
  }
});

var mv1 = new MyView({model: new Model1()});
var mv2 = new MyView({model: new Model2()});

This way, the model objects inherit the type property through the prototype chain. See also http://backbonejs.org/#View-render.

Alternative, less efficient and less reliable solutions include:

• Giving the constructor a name and accessing that:

  var Model1 = Backbone.Model.extend();
  Model1.name = "Model1";
  
  var MyView = Backbone.View.extend({
    render: function () {
      console.log("You are using " + this.model.constructor.name);
    }
  });
  
  var mv1 = new MyView({model: new Model1()});
  var mv2 = new MyView({model: new Model2()});
  

  (The additional assignment to the name property was not necessary if the constructor was

  var Model1 = function Model1 () {
    // …
  };
  

  or

  function Model1 ()
  {
    // … 
  }
  

  but that is – unfortunately – not the Backbone.js way.)

• Parsing the string representation of a named Function instance such as a constructor. But that is implementation-dependent:

  var Model1 = function Model1 () {
    // …
  };
  
  var MyView = Backbone.View.extend({
    getModelName: function () {
      var aFunction = this.model.constructor;
      return (aFunction != null && typeof aFunction.name != "undefined" && aFunction.name)
        || (String(aFunction).match(/\s*function\s+([A-Za-z_]\w*)/) || [, ""])[1];
    },
  
    render: function () {
      console.log("You are using " + this.getModelName());
    }
  });
  

  (Implemented as jsx.object.getFunctionName(). But again, AIUI not fully possible with Backbone.js.)

• Using instanceof as suggested in DashK's answer. But that does not give you information immediately or reliably. Because you have to put the most significant name in the prototype chain first, and change the method whenever you change the prototype chain, or you will get false positives and false negatives:

  var MyView = Backbone.View.extend({
    render: function () {
      var modelName = "an unknown model";
  
      if (this.model instanceof Model1)
      {
        modelName = "Model1";
      }
      else if (this.model instanceof Model2)
      {
        modelName = "Model2";
      }
      else if (this.model instanceof Supermodel)
      {
        modelName = "Supermodel";
      }
  
      console.log("You are using " + modelName);
    }
  });
  

Answer 2

Keeping this simple...

var Model1 = Backbone.Model.extend();
var Model2 = Backbone.Model.extend();

var MyView = Backbone.View.extend({
  render:function(){
    if (this.model instanceof Model1) {
      alert("You're using model1");
    }
    else if (this.model instanceof Model2) {
      alert("You're using model2");
    }
    else {
      alert("I've no idea what you're using");
    }
  }
})

var mv1 = new MyView({model: new Model1()});
var mv2 = new MyView({model: new Model2()});
mv1.render();
mv2.render();