클릭시 아약스 출력을 복제하는 핸들 모음

나는 책 제목을 클릭하면 자세한 내용을 보여주는 새로운 div가 표시되는 책 목록을 인쇄하기 위해 핸들 막대를 사용하고 있습니다. 목록을 인쇄하고 책 제목을 클릭하면 자세한 내용을 볼 수 있지만 클릭하는 모든 제목은 해당 책의 세부 정보 대신 클릭 한 첫 번째 책의 세부 정보를 출력합니다. 나는 바인딩과 관련이 있지만 작동하는 구문을 찾지 못했다고 생각한다. 여기 내 HTML은 & 핸들 바 코드입니다 :클릭시 아약스 출력을 복제하는 핸들 모음

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Library</title> 
</head> 
<body> 
    <div class="main"> <div id="book-list-items"></div></div> 
    <div id="book-details-items"></div> 

    <script src="js/jquery-1.11.1.min.js"></script> 
    <script src="js/handlebars-v1.3.0.js"></script> 
    <script src="js/main.js"></script> 

    <script id="book-list-template" type="text/x-handlebars-template"> 
    <div class="book-list"> 
     <h3 class='template title'>{{title}}</h3> 
    </div> 
    </script> 

    <script id="book-details-template" type="text/x-handlebars-template"> 
    <div class="book-details"> 
     <h3 class='template title'>{{title}}</h3> 
     <h4 class='template year'>{{year}}</h4> 
     <h4 class='template rating'>{{rating}}</h4> 
    </div> 
    </script> 
</body> 
</html>

그리고 여기에 자바 스크립트입니다 : 내가 잘못거야 어디

$(document).ready(function(){ 

    var source = $('#book-list-template').html(); 
    var source2 = $('#book-details-template').html(); 
    var template = Handlebars.compile(source); 
    var template2 = Handlebars.compile(source2); 

    $.ajax({ 
    type:'GET', 
    url: 'https://....', 
    data:{ api_key: '....' 
    } 
    }).done(
    function(data){ 
     populate_template(data) 
    }); 

    var populate_template = function(data){ 
    data.results.forEach(function(book){ 
     var html = $(template(book)); 
     $('.main').append(html); 
     html.click({book:book}, book_info) 
    }) 
    } 

    var book_info = function(event){ 
    id = event.data.book.id 
    $.ajax({ 
     type:'GET', 
     url: 'https://....' + id, 
     data:{ api_key: '....' 
     } 
    }).done(function(data){ 
     var html2 = template2(data); 
     $(document).trigger('change', event.currentTarget); 
     $(document).on('change', function(e, listing){ 
     e.preventDefault(); 
     $(listing).replaceWith(html2) 
     }); 
    }); 
    }; 
});

사람이 말해 줄래? # book-details-template 스크립트에 있다고 가정하지만 구문이 무엇인지 파악하고 있습니다.

출처

2014-07-08 Car

왜 문서에서 변경 사항을 트리거 한 다음 트리거 이후에 변경 핸들러를 바인딩합니까? 그냥'$ (event.currentTarget) .replaceWith (html2)'할 수 없습니까? –

아하, 나는 그것을 다시 복잡하게했다. 이 일을했습니다 - 고마워요! – Car

문서의 "변경"수신기가 첫 번째 호출에서 활성 상태를 유지하고 이후에 호출이 복제 됨 등으로 인해 발생한다고 생각합니다 ... 수신기를 제거하고 템플릿을 book-details-items :

$ ("# book-details-items") .html (html2);

출처

2014-07-08 07:30:13 chf

이것은 내가 거기에가는 길을 가져 오지만 event.currentTarget ("this"대신에)을 유지해야합니다. Blake Simpson의 위의 의견은 완벽한 솔루션을 제공합니다. – Car

클릭시 아약스 출력을 복제하는 핸들 모음

답변

관련 문제