잡히지 않은 ReferenceError : showCategory가 정의되지 않았습니다.

Question

showCategory라는 함수를 정의했습니다. 그러나, 어떤 이유로 내 디버거가 show category가 정의되지 않았다고 말하고 있습니다. 그리고 JSON 페이지를로드/생성하지 않습니다. 또한 그것은 "catch되지 않는 형식 오류 : 정의되지 않은의 '대체'속성을 읽을 수 없습니다"라고 나는 일도을 시도했지만 작동하지 않습니다

$.ajax({ 
type: 'GET', 
url: 'http://jsonstub.com/bike/1', 
contentType: 'application/json', 
beforeSend: function (request) { 
    request.setRequestHeader('JsonStub-User-Key', '50caee73-c7ed-43b7-912a-7fd6fcdbfd91'); 
    request.setRequestHeader('JsonStub-Project-Key', '54fb5790-b2cc-432f-88ee-7d3596b700bd'); 
} 
}).done(function showCategory(urlObj, options) 
{ 
    var categoryName = urlObj.hash.replace(/.*category=/, ""), 
    category = categoryData[ categoryName ],  
    pageSelector = urlObj.hash.replace(/\?.*$/, ""); 

if (category) { 
    var $page = $(pageSelector), 
     $header = $page.children(":jqmData(role=header)"), 
     $content = $page.children(":jqmData(role=content)"), 
     markup = "<p>" + category.description + "</p><ol>",  
     content = "<p>" + category.content + "</p>", 
     image = "<div class='image'><img src='" + category.picUrl + "'></img></div>" , 
     cItems = category.items, 
     numItems = cItems.length; 



    for (var i = 0; i < numItems; i++) { 
     markup += "<li>" + cItems[i].name + "</li>"; 
    } 
    markup += "</ol>"; 


    $header.find("h3").html(category.name); 
    $content.html(markup + content + image); 
    $page.page(); 
    $content.find(":jqmData(role=listview)").listview(); 
    options.dataUrl = urlObj.href; 
    $.mobile.changePage($page, options); 



} 
}) 


$(document).bind("pagebeforechange", function(e, data) { 
if (typeof data.toPage === "string") { 
    var u = $.mobile.path.parseUrl(data.toPage), 
     re = /^#category-item/; 
    if (u.hash.search(re) !== -1) {   
     showCategory(u, data.options); 
     e.preventDefault(); 

    } 
} 
}); 

. 어떤 아이디어가 잘못 됐나요?

DEMO JSFIDDLE

Answer 1

는 AJAX 요청의 done 방법의 외부에서 showCategory 함수를 정의하고 호출.

function showCategory(args){ 
    //stuff 
} 
$.ajax({ 
    //ajax stuff 
}).done(function(data){showCategory(argsTakenFromData)}) 

$(document).bind("pagebeforechange", function(e, data) { 
    if (typeof data.toPage === "string") { 
     var u = $.mobile.path.parseUrl(data.toPage), 
     re = /^#category-item/; 
     if (u.hash.search(re) !== -1) {   
     showCategory(u, data.options); 
      e.preventDefault(); 
     } 
     } 
    }); 

도움이 될 것입니다.

UPD 내 대답이 약간 변경되어 done 함수 호출이 변경되었습니다. 그래도 여전히 오류가 발생합니다. categoryData 배열을 정의하는 것을 잊었거나 선언이 표시되지 않습니다. 따라서 주석에이 사실을 알려주십시오. 따라서 arr을 선언하고 결과를 알려주십시오.