Доступ к свойствам Javascript

Question

У меня есть следующий класс javascript, и по какой-то причине текущее свойство не установлено равным -1, когда я закончил загрузку записей (или я не могу правильно получить доступ к свойству из экземпляра класса). Я новичок в javascript, поэтому любая помощь будет оценена.

var MyLib = function() { 
this.current = 0; 

MyLib.prototype.loadMore = function (id, loadingDivId, url) { 
    if (this.current > -1) { 
     this.current++; 
     $(loadingDivId).html("<h3>Loading more records please wait...</h3>"); 
     $.get(url + this.current, function (data) { 
      if (data != '') { 
       $(id).append(data); 
       $(loadingDivId).empty(); 
      } else { 
       this.current = -1; // seems like this isn't being set 
       $(loadingDivId).html("<h3><i>-- No more results -- </i></h3>"); 
      } 
     }); 
    } 
} 

};

Вот как я звоню его

<script type="text/javascript"> 
    $(function() { 
     var lib = new MyLib(); 

     $('#loadMore').click(function() { 
      if (lib.current > -1) { 
       lib.loadMore("#results", "#loading", '/home/search/'); 
       if (lib.current == -1) { 
        // Having problems getting into this portion 
        $("#loadMore").hide(); 
       } 

      } 
      return false; 
     }); 

    }); 

</script> 

Answer 1

Хотя @Gnostus правильно о размещении прототипа, у вас есть проблема, потому что вы делая асинхронный запрос, но пытается использовать ответ сразу после отправки запроса.

Другими словами, код после ваш loadMore() вызов работает до того принимается ответ.

Смените ваш прототип, чтобы принять function для использования в обратном вызове.

// accept a function to call upon success ---------------v 
MyLib.prototype.loadMore = function (id, loadingDivId, url, fn) { 
    if (this.current > -1) { 
     this.current++; 
     $(loadingDivId).html("<h3>Loading more records please wait...</h3>"); 
     $.get(url + this.current, function (data) { 
      if (data != '') { 
       $(id).append(data); 
       $(loadingDivId).empty(); 
      } else { 
       this.current = -1; 
    // ------------v------call the function 
       fn(); 
       $(loadingDivId).html("<h3><i>-- No more results -- </i></h3>"); 
      } 
     }); 
    } 
} 

Затем передайте функциональность, которая зависит от ответа.

$('#loadMore').click(function() { 
    if (lib.current > -1) { 

      // pass in your function -----------------------------v 
     lib.loadMore("#results", "#loading", '/home/search/', function() { 
        // This if() statement could be removed, since it will 
        // always be "true" in the callback. 
        // Just do the $("#loadMore").hide(); 
       if (lib.current == -1) { 
        $("#loadMore").hide(); 
       } 
     }); 
    } 
    return false; 
}); 

Или, если это будет стандартная функциональность, вы можете добавить функцию к prototype из MyLib, и просто он принимает соответствующие аргументы. Тогда ваш loadMore можно просто назвать его от this.

Answer 2

прототипы выходят вперед объявление функции

var MyLib = function() { 
this.current = 0; 
}; 

MyLib.prototype.loadMore = function (id, loadingDivId, url) { 
    if (this.current > -1) { 
     this.current++; 
     $(loadingDivId).html("<h3>Loading more records please wait...</h3>"); 
     $.get(url + this.current, function (data) { 
      if (data != '') { 
       $(id).append(data); 
       $(loadingDivId).empty(); 
      } else { 
       this.current = -1; // seems like this isn't being set 
       $(loadingDivId).html("<h3><i>-- No more results -- </i></h3>"); 
      } 
     }); 
    } 
}