데이터를 개체 속성으로 설정하십시오.

Question

문제가있어서 더 자세히 알 수 없습니다.

나는 이와 같은 것을 가지고있다.

function Paginator() { 
    this.currentPage = 1; 
}; 

Paginator.prototype.getCurrentPage = function() { 
     return this.currentPage; 
}; 

Paginator.prototype.getNextPage = function() { 
    this.currentPage++; 
    return this.getCurrentPage(); 
}; 

Paginator.prototype.getPreviousPage = function() { 
    this.currentPage--; 
    return this.getCurrentPage(); 
}; 

Paginator.prototype.setCurrentPage = function (page) { 
    this.currentPage = page; 
    return this.getCurrentPage(); 
}; 

Paginator.prototype.renderPage = function (page, data) { 
    this.currentPage = page; 
    this.pageList = []; 
    for(i = 0; i < Math.ceil(75/12); i++) 
    { 
     this.pageList.push([i, (i-1)*12, i*12]); 
    } 
    for(i=this.pageList[page][1]; i < this.pageList[page][2]; i++) { 
     var tmpl = "<article class='col-lg-3 col-md-4 col-sm-12 col-xs-12 video'><div class='video-image'><img class='img-responsive img' src='img/" + data[i].image + ".jpeg'><img class='player img-responsive' src='img/icon.png' width='75px' height='75px'></div><p class='video-title'><strong>" + data[i].title + "</strong></p><p class='video-timestamp'>" + data[i].timestamp + "</p></article>"; 
     $(".video-container").append(tmpl); 
    } 
}; 

이것은 내 페이지 매김 개체입니다.

내가 paginator.getCurrentPage()를 호출하면; 기본값이기 때문에 1을 반환합니다.

그러나 renderPage (3, data)를 호출하면; 3 페이지와 3 페이지의 데이터로 페이지 3을 렌더링해야합니다. 그것은 올바른 데이터를로드하고이를 표시 할 수 있지만 내가 가지고있는 스크립트의 바닥에,

Loader.prototype.load = function (url, callback, from, to) { 
    //load JSON from url 
    var xhr = new XMLHttpRequest(); 
    var self = this; 

    xhr.onreadystatechange = ensureReadiness.bind(self); 

    function ensureReadiness() { 
     if (xhr.readyState < 4) { 
      return; 
     } 
     if (xhr.status !== 200) { 
      return; 
     } 
     // all is well 
     if (xhr.readyState === 4) { 
      var JSONObject = JSON.parse(xhr.responseText); 
      (to) == "all" ? to = JSONObject.length : to; 
      callback(JSONObject, from, to); 
     } 
    } 
    xhr.open('GET', url, true); 
    xhr.send(''); 
}; 

Cache.prototype.load = function(data, from, to) { 
    this.data = data; 
    paginator.renderPage(3, data); 

}; 

모든 것이 작동 : 문제는이 렌더링 함수가 아약스 함수에 대한 콜백 또 다른 함수를 호출한다는 것입니다 :

cache = new Cache(); 

paginator = new Paginator(); 

loader = new Loader(); 
loader.load("http://academy.tutoky.com/api/json.php",cache.load.bind(cache), 0, 30); 

이

는 뷰를 생성 paginator.renderPage 함수를 호출 cache.load의 함수를 호출가 loader.load 함수를 호출해야하지만, 또한이 renderPage 함수의 인수로부터 어떤 값으로 paginator.currentPage을 설정해야합니다. 그것은 paginator.renderPage 함수의 범위에서 수행하지만, console.log (paginator.getCurrentPage()); 전체 스크립트의 맨 아래에 페이지 인수의 값이 아닌 1이 리턴됩니다.

Answer 1

페이지 번호를 기록하기 전에 비동기 호출이 완료되지 않는 문제가있는 것처럼 보입니다. 그래서 같은 콜백에 CONSOLE.LOG을 포장하기 위해 fiddle을 업데이트했습니다

loader.load("http://academy.tutoky.com/api/json.php",test, 0, 30); 

function test(data, from, to) { 
    cache.load(data, from, to); 
    console.log(paginator.getCurrentPage()); 
} 

물론, 당신이 내 이름을 향상 좀보고 할 수 있습니다! ; o)