TypeError: invalid 'in' operand n

Question

In the firebug, I have got an error, it told me that it's a type error in the underscore.min.js

when I commended out the error line in the month.js, there is nothing wrong

I don't know what mistake I have made, I have checked the monthCollection and I'm sure the monthCollection is right

I couldn't access the initialize of DayView, the log has no 'success' but just one line 'begin to new a day view'

js/views/month.js

define([
  'backbone',
  'underscore',
  'views/day'
], function(Backbone, _, DayView) {
  'use strict';

  var MonthView = Backbone.View.extend({
    initialize: function(el, collection) {
      this.el = el;
      this.monthCollection = collection;

      this.render();
    },

    //draw the month
    render: function() {
      this.monthCollection.each(function(date) {
        var tmpDate = date.get("date");
        var tmpDay = date.get("day");
        console.log("begin to new a day view");
        var dayView = new DayView(tmpDate, tmpDay);  //error
//        this.el.append(dayView.view);
      }, this);
    }
  });

  return MonthView;
});

js/views/day.js

define([
  'backbone',
  'underscore'
], function(Backbone, _) {
  'use strict';

  var DayView = Backbone.View.extend({
    dateTemplate: _.template( $('#date-template').html() ),

    initialize: function(date, day) {
      console.log("success");
      this.date = date;
      switch(day) {
        case 0:
          this.day = Sun;
        break;
        case 1:
          this.day = Mon;
        break;
        case 2:
          this.day = Tue;
        break;
        case 3:
          this.day = Wen;
        break;
        case 4:
          this.day = Thu;
        break;
        case 5:
          this.day = Fri;
        break;
        case 6:
          this.day = Sat;
        break;
        default:
          this.day = fail;
      }

      this.render();
    },

    //draw the day to this.view
    render: function()  {
      this.view = this.dateTemplate({
        date: this.date,
        day: this.day
      });
    }
  });

    return DayView;
});

Answer 1

You are not passing parameters to the views the correct way. Check http://backbonejs.org/#View-constructor

Here's a full solution:

var startData = [
    {
        "date": "18/01/1983",        
        "day" : 3
    },
    {
        "date": "20/01/1983",        
        "day" : 5
    }
];

var Day = Backbone.Model.extend();

var Month = Backbone.Collection.extend({
    model: Day
});


var MonthView = Backbone.View.extend({
    initialize: function() {
      this.render();
    },

    //draw the month
    render: function() {
      this.collection.each(function(date) {
        var tmpDate = date.get("date");
        var tmpDay = date.get("day");

        var dayView = new DayView({date:tmpDate, day:tmpDay });  

        this.$el.append(dayView.el);
      }, this);
    }
});

 var DayView = Backbone.View.extend({

    initialize: function(options) {

      this.date = options.date;

      switch(options.day) {
        case 0:
          this.day = "Sun";
        break;
        case 1:
          this.day = "Mon";
        break;
        case 2:
          this.day = "Tue";
        break;
        case 3:
          this.day = "Wen";
        break;
        case 4:
          this.day = "Thu";
        break;
        case 5:
          this.day = "Fri";
        break;
        case 6:
          this.day = "Sat";
        break;
        default:
          this.day = "fail";
      }

      this.render();
    },

    render: function()  {

        var template = _.template($('#date-template').html(), {        
                            date: this.date,
                            day: this.day});
        this.$el.html(template);

    }
});

var month = new Month(startData);   
var monthView = new MonthView({el: $('body'), collection:month});

Answer 2

Try this:

var Day = Backbone.Model.extend({
  dayOfWeek: ["Sun","Mon","Tue","Wen","Thu","Fri","Sat"],
  defaults: {
    date: "01/01/1970",
    day : 4
  },
  toJSON: function(){
    var json = Backbone.Model.prototype.toJSON.apply(this, arguments);
    json.day = this.dayOfWeek.hasOwnProperty(json.day) ?
               this.dayOfWeek[json.day] : 'fail';
    return json;
  }
});

var DayView = Backbone.View.extend({
  template: _.template($('#date-template').html()),
  initialize: function() {
    this.model = this.model || new Day();
    return this.render();
  },
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

var Month = Backbone.Collection.extend({ model: Day });
var MonthView = Backbone.View.extend({
  initialize: function() { return this.render() },
  render: function(){
    var fragment = document.createDocumentFragment();
    this.collection.each(function (day){
      var dayView = new DayView({ model: day });
      fragment.appendChild(dayView.el);
    }, this);
    this.$el.html(fragment);
    return this;
  }
});

var monthView = new MonthView({
  el: document.body,
  collection: new Month(startData)
});

Answer 3

This error once happened to me because I passed the parameter to the view as a string instead as a object.