CODEWITHSUNDEEP
javascriptjquerybackbone.js
Tithos
Tithos

Reputation: 1417

Backbone $el bug

I am rewriting some Backbone code and am getting a strange bug. Here is my code:

App.Views.ExploreCard.user = App.Views.ExploreCard.Parent.extend({
  name: 'user',
  allowUntyped: true,
  classes: 'explore-person-box shadowed',
  onclick: function() {
    window.location.assign(this.data.profilePath);
  },
  postRender: function() {
    App.HCS.redrawHCS(this.$el.find('.score'), this.$el.find('.user-card-avatar-round'));
  }
});

and

App.HCS = {
  redrawHCS: function(elements) {
    elements.each(function(index, value, border) {
      var score = $(value).html();
      console.log(value);
      console.log(border);
      if ( score <= 33 && score >= 1 ) {
        $(value).css("background-color", "#ff4013");
        $(border).css("border", "3px solid #ff4013;");
      }
      else if ( score <= 66 && score >= 34 ) {
        $(value).css("background-color", "rgb(92, 154, 0)");
        $(border).css("border", "3px solid rgb(92, 154, 0)");
      }
       else if ( score <= 99 && score >= 67 ) {
        $(value).css("background-color", "#fb9f00");
        $(border).css("border", "3px solid #fb9f00;");
      }
    });
  }
};

When I do a console.log of value and border, I always get undefined for border. I have as a sanity check switched the arguments in this line:

from:

App.HCS.redrawHCS(this.$el.find('.score'), this.$el.find('.user-card-avatar-round'));

to:

App.HCS.redrawHCS(this.$el.find('.user-card-avatar-round'), this.$el.find('.score'));

and no matter the order the second argument border is always undefined.

I have done some googling on Backbone $el, but have not found any fixes.

Upvotes: 0

Views: 72

Answers (1)

mu is too short
mu is too short

Reputation: 434665

Your code is a little confused. You're calling App.HCS.redrawHCS with two arguments:

App.HCS.redrawHCS(this.$el.find('.score'), this.$el.find('.user-card-avatar-round'));

but redrawHCS only looks at once argument:

redrawHCS: function(elements) {

Then you try to iterate over elements with each:

elements.each(function(index, value, border) {

but that will be jQuery's each and that calls the callback function as:

function(index, dom_element)

so value will be a DOM element, border will be undefined, and the second argument to redrawHCS will be ignored completely.

If .user-card-avatar-round is supposed to be the border for the value .score then you'd want something more like this:

redrawHCS: function(values, borders) {
    var i, value, border;
    for(i = 0; i < values.length; ++i) {
        value  = values[i];
        border = borders[i];
        //...
    }
}

I'm pretty sure there are better ways to deal with this but I'd need to know the DOM structure to give you one. I'd guess that it would look like redrawHCS(this.$el.find('.score')) and a border = $(value).closest('.user-card-avatar-round') inside the each function but that's pretty speculative.

Upvotes: 2

Related Questions