2011-09-20 7 views
1

이 코드를 가지고 있고 그것의 의미를하려고 해요 - 나는 내가 무엇을 말할 수에서장고 자바 스크립트가 설명

{% if book %} 

    <script type='text/javascript'> 

     $(document).ready(function() { 

      $.get('/ajax/book/{{ book.id }}/timetable/', {}, function(data) { 

       data = JSON.parse(data); 
       var events = new Array(); 
       for (var i in data) { 
        events.push({ 
         id: data[i].id, 
         title: '{{ request.user.name }}', 
         start: Date.parse(data[i].startTime, "yyyy-MM-dd HH:mm:ss"), 
         end: Date.parse(data[i].endTime, "yyyy-MM-dd HH:mm:ss"), 
         allDay: false 
        }); 
       } 

       var calendar = $('#calendar').fullCalendar({ 
        header: { 
         left: 'prev,next today', 
         center: 'title', 
         right: 'agendaDay,agendaWeek' 
        }, 
        theme: true, 
        contentHeight: 400, 
        defaultView: 'agendaWeek', 
        selectable: true, 
        selectHelper: true, 
        eventClick: function(calEvent, jsEvent, view) { 
        }, 
        select: function(start, end, allDay) { 
         var title = '{{ request.user.name }}'; 
         $.post('/ajax/book/{{ book.id }}/timetable/new/', { 
          csrfmiddlewaretoken: getCookie('csrftoken'), 
          startTime: start.format("yyyy-mm-dd HH:MM:ss"), 
          endTime: end.format("yyyy-mm-dd HH:MM:ss"), 
         }, function(data) { 
          calendar.fullCalendar('renderEvent', 
           { 
            title: title, 
            start: start, 
            end: end, 
            allDay: allDay 
           }, 
           true // make the event "stick" 
          ); 
         }); 
         calendar.fullCalendar('unselect'); 
        }, 
        editable: true, 
        events: events, 
        eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 
         alert(
          "The end date of " + event.title + " has been moved " + 
          dayDelta + " days and " + 
          minuteDelta + " minutes." 
         ); 

         if (!confirm("Is this okay?")) { 
          revertFunc(); 
         } 

        } 
       }); 

      }); 

     }); 

    </script> 

을 작품 - 어떻게 정말 모르겠어요, 아약스/책/.. ./timetable와 아약스/책 /.../ 시간표/새 통화 book_timetable (요청 ID) 및 book_timetable_new (요청 ID) - 기능은

url(r'^ajax/book/(?P<bookid>\d+)/timetable/$', twobooks.ajax.views.book_timetable), 
    url(r'^ajax/book/(?P<bookid>\d+)/timetable/new/$', twobooks.ajax.views.book_timetable_new), 

-

def book_timetable(request, bookid): 
    book = get_object_or_404(Book, id=bookid) 
    rawslots = TimeSlot.objects.filter(user=request.user).filter(book=book) 
    slots = [] 
    for rawslot in rawslots: 
     slot = { 
      'id':   rawslot.id, 
      'startTime': str(rawslot.startTime), 
      'endTime':  str(rawslot.endTime), 
     } 
     slots.append(slot) 
    return HttpResponse(simplejson.dumps(slots)) 

def book_timetable_new(request, bookid): 
    book = get_object_or_404(Book, id=bookid) 
    startTime = datetime.strptime(request.POST['startTime'], "%Y-%m-%d %H:%M:%S") 
    endTime = datetime.strptime(request.POST['endTime'], "%Y-%m-%d %H:%M:%S") 
    timeslot = TimeSlot(
     user = request.user, 
     book = book, 
     startTime = startTime, 
     endTime = endTime, 
    ) 
    timeslot.save() 
    return JSONify("") 

다른 데이터를 제외하고 나는 이와 비슷한 것을하려고합니다. 이것이 내가 어떻게 작동 하는지를 알아 내려고하는 이유입니다. 누군가가 내게 그것을 설명 할 수 있다면 그것은 좋을 것이다!

+0

무엇을 이해하지 못합니까? JS, 파이썬, 뭐야? –

+0

글쎄, 일반적으로 무슨 일이 일어나고 있는지 알기 때문에 시간 요청 배열을 얻고 요청을 통해 달력에 표시합니다. 그러나, 템플릿을 호출하는 방법을 이해하지 못하는, 그리고 표현하는 방법, 사용자의 모든 timeslots (모든 도서에 걸쳐) – scubadiver

+0

사실, 나는 JS와 파이썬 이야기하는 방법을 잘 모르겠지만, 더군다나, 나는 JS가 무엇을하고 있는지 확신하지 못한다. (비록 내가 규정 한 작업을 알 필요가 있는지 확신 할 수 없다.) – scubadiver

답변

0

이것은 상당히 표준적인 AJAX 패턴입니다. 템플릿은 원본보기로 렌더링됩니다. 렌더링 과정에서 Django 템플릿 변수로 표시된 JavaScript의 일부 요소 (예 : {{ book.id }}{{ request.user.name }})가 채워 지므로 브라우저에 도달 할 때까지 나머지 JS와 구분할 수 없게됩니다.

이제 Javascript는 서버를 호출하여 해당 요소를 전달합니다. 서버는 JSON 데이터로 응답합니다.이 데이터는 .get 호출의 세 번째 매개 변수 인 함수에 의해 구문 분석됩니다. 나는이 함수를 너무 깊이 들여다 보지 못했지만 그 데이터를 사용하여 fullCalendar을 인스턴스화하는 것으로 보입니다. 이는 아마 별개의 jQuery 스크립트입니다.

하나의 약간 이상한 점은 브라우저가 페이지를로드하자마자 AJAX 호출이 실행되도록 설정된다는 것입니다. 일반적으로 원래 템플릿에 데이터를 포함 할 수 있기 때문에 일반적으로 아무 것도 없습니다. 일반적으로 AJAX는 버튼 클릭과 같은 브라우저의 일부 이벤트에 대한 응답으로 실행되도록 설정됩니다.

+0

템플릿이 렌더링되었다고 말할 때 나는 무엇을 의미하는지 모르겠다. 원래의 견해 - 나는 이것이 일어나는 것을 볼 수 없습니까? 또한 hte calendar를 표시하려면 select : function (start, end, allDay)이 필요합니까? – scubadiver

+0

사용자가 참조하는 뷰 중 하나가 아닙니다. 사용자가 브라우저에서 해당 페이지로 이동할 때 템플릿을 원래대로 렌더링하는 책임이있는 별도의 ** 비 Ajax ** 뷰가 있습니다. 'select' 함수에 관해서는'fullCalendar'에 대한 문서를 봐야 할 것입니다 : 달력에서 하루를 선택할 때 트리거되는 함수이기를 기대합니다. 그래서 그 상황에서 어떤 일이 일어나길 원한다면 이 기능이 필요합니다. –

관련 문제