DELETE 요청이 완료되기 전에 페이지가 렌더링 됨

Jiayang

저는 "todo 앱"백본 클라이언트 측에서 작업 중입니다. TodoView에서 삭제 요청을하면 색인 페이지 (전체 목록 표시)로 리디렉션됩니다. 문제는 리디렉션 후에도 삭제 된 할일이 여전히 목록에 있다는 것입니다. 그러나 새로 고침 후 사라집니다.

할 일 목록이 DELETE 요청이 수행되는 것보다 빠르게 렌더링 되기 때문 입니까?

todoView에서 '삭제'버튼을 듣습니다.

events: {
  'click .red-button' : 'delete',
},

delete: function() {
  this.model.destroy({
    success: function(model, res) {
      $('.body-container').empty();
      //redirecting to the index page--the todo list
      navigate(''); //equals to Backbone.Router.prototype.navigate(url, {trigger: true}) 
    }
  })
},

할 일 모델에 대한 동기화를 무시했습니다. '삭제'방법은 다음과 같습니다.

case 'delete':
  request
    .del(this.url())
    .end(function(res) {
      console.log('deleting......');
    });
    options.success();
break;
톨리

첫째, success콜백을 사용하지 마십시오 ! 매우 나쁜 습관 / 미래를 위해 들어가는 것은 나쁜 습관입니다 ( "이유"는 아래 참조). 백본은 destroy이벤트 발생할 때까지 "완료"되지 않습니다 . 따라서 모델의 destroy 이벤트를 들어보십시오. 클리너가 더 쉽습니다 :)

delete: function(){
  this.model.destroy();
  //Ideally put this in your ROUTER
  this.listenTo(this.model, 'destroy', function(){
     navigate();
  }
}

그러나 당신은 거기에서 끝나지 않았습니다. 가장 가능성이 높은 문제는 인덱스 페이지에있는 목록보기가 모델의 destroy이벤트를 수신하지 않는다는 것 입니다. ItemViews (개별보기)를 사용했다고 가정하면

 var TodoView = Backbone.View.extend({
   initialize: function(){
     this.listenTo(this.model, 'destroy', this.remove);
   }
 });

그러면 표면 문제가 해결됩니다.

그러나이 경우 더 큰 근본적인 문제가 있습니다. 인덱스 페이지의 ToDoList보기가 다른 곳으로 이동할 때 제대로 제거되지 않습니다. 이로 인해 많은 문제가 발생합니다 (특히 애플리케이션이 커지면). 탐색 이벤트가 발생할 때마다 모든보기가 remove()페이지에서 d 인지 확인 하십시오. 매우 중요!!!

"인덱스 페이지"에 대한 코드를 게시하면 추가 진단을 도와 드릴 수 있습니다.

success콜백을 사용하는 것이 잘못된 이유 (초안 1)

백본에서 "실제"응용 프로그램을 빌드하기 시작하면 일반적으로 많은 뷰, 모델 및 다양한 개체가 모델이 파괴되도록 "듣고"있을 것입니다. 이 모델을 듣고있는 5 ~ 10 개의 서로 다른 뷰가있을 수 있습니다 (사실 제가 작성한 거의 모든 엔터프라이즈 앱에서이 상황을 겪었습니다). success콜백 을 사용하면 발생하는 이벤트 체인을 추적하는 것이 매우 혼란스러워집니다. 작업 (예 : 멀리 탐색)이 발생하면 먼저보고 싶은 곳이 라우터입니다. 그렇지 않으면, 네비게이터를 실행시키는 50-100 개의 다른 "액션"이 있다고 상상해보세요. 그리고 그것들은 모두 success다른 모델 콜백 에서 일어나고 특정 네비게이션이 발생한 이유를 추적하는 데 며칠이 걸립니다.listenTo다른 개체를 중앙 집중화했습니다. 나중에 좀 더 자세히 설명하겠습니다 (혼란스러워 보인다). 그러나 이것에 대해 저를 믿으십시오 success..

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

C # 비동기 작업이 완료되기 전에 완료 됨

분류에서Dev

for 루프가 완료되거나 배열로 푸시되기 전 페이지의 EJS 렌더링

분류에서Dev

useEffect가 완료되기 전에 후크 렌더링 구성 요소에 반응

분류에서Dev

Symfony / Twig에서 렌더링이 완료되기 전에 출력 플러시

분류에서Dev

React는 페이지가 완전히 렌더링되기 전에 미완성 요소를 보여줍니다.

분류에서Dev

페이지가 렌더링되기 전에 기능 실행

분류에서Dev

MVC 5 Razor보기에 Linq 오류가 표시되지만 페이지가 올바르게 렌더링 됨

분류에서Dev

작업이 완료되기 전에 NodeJS 비동기가 완료 됨

분류에서Dev

Firebasequery가 완료되기 전에 Android 비동기 작업이 완료 됨

분류에서Dev

CSS가 렌더링 된 페이지에 적용되지 않지만 IDE에 표시됨

분류에서Dev

q. 약속이 완료되기 전에 모두 반환 됨

분류에서Dev

프리 로더 페이지가 렌더링되기 전에 웹 사이트 홈 페이지를 즉시 표시

분류에서Dev

MEAN 스택 : 페이지가 전혀 렌더링되지 않음

분류에서Dev

Promise가 Node, Express, mongoDB에서 해결되기 전 페이지 렌더링

분류에서Dev

nuxtjs 페이지는 nuxtServerInit 완료 전에 표현식을 렌더링합니다.

분류에서Dev

프로그램이 종료되기 전에 신호 CGI 출력이 완료 됨

분류에서Dev

페이지가 완전히 렌더링되기 전에 크롬 확장에서 '즉시'페이지에 CSS 스타일 적용

분류에서Dev

React-페이지를 렌더링하기 전에 데이터 가져 오기

분류에서Dev

NodeJS는 완전히 렌더링 된 HTML 페이지 가져 오기

분류에서Dev

이전 작업이 완료되기 전에 작업이 시작됨

분류에서Dev

가져 오기가 완료되기 전에 React.js 렌더링

분류에서Dev

첫 번째 Jquery가 완료되기 전에 두 번째 Jquery json이 시작됨

분류에서Dev

Jquery 지연됨-이전 함수가 완료되기 전에 함수 호출 연기

분류에서Dev

Loaded 이벤트에서 렌더링이 완료되지 않았습니다.

분류에서Dev

요청을 완료하기 전에 AWS Lambda 함수가 종료 됨

분류에서Dev

요청이 완료되기 전에 Polymer iron-ajax 헤더 속성을 계산할 수 없습니다.

분류에서Dev

비동기 메서드가 완료 될 때만 페이지 렌더링

분류에서Dev

Polymer, 다른 요소를 렌더링하기 전에 core-ajax가 완료되기를 기다리는 방법은 무엇입니까?

분류에서Dev

Spring-batch가 종료 상태로 종료 됨 : 실제 작업이 완료되기 전에 완료 되었습니까?

Related 관련 기사

  1. 1

    C # 비동기 작업이 완료되기 전에 완료 됨

  2. 2

    for 루프가 완료되거나 배열로 푸시되기 전 페이지의 EJS 렌더링

  3. 3

    useEffect가 완료되기 전에 후크 렌더링 구성 요소에 반응

  4. 4

    Symfony / Twig에서 렌더링이 완료되기 전에 출력 플러시

  5. 5

    React는 페이지가 완전히 렌더링되기 전에 미완성 요소를 보여줍니다.

  6. 6

    페이지가 렌더링되기 전에 기능 실행

  7. 7

    MVC 5 Razor보기에 Linq 오류가 표시되지만 페이지가 올바르게 렌더링 됨

  8. 8

    작업이 완료되기 전에 NodeJS 비동기가 완료 됨

  9. 9

    Firebasequery가 완료되기 전에 Android 비동기 작업이 완료 됨

  10. 10

    CSS가 렌더링 된 페이지에 적용되지 않지만 IDE에 표시됨

  11. 11

    q. 약속이 완료되기 전에 모두 반환 됨

  12. 12

    프리 로더 페이지가 렌더링되기 전에 웹 사이트 홈 페이지를 즉시 표시

  13. 13

    MEAN 스택 : 페이지가 전혀 렌더링되지 않음

  14. 14

    Promise가 Node, Express, mongoDB에서 해결되기 전 페이지 렌더링

  15. 15

    nuxtjs 페이지는 nuxtServerInit 완료 전에 표현식을 렌더링합니다.

  16. 16

    프로그램이 종료되기 전에 신호 CGI 출력이 완료 됨

  17. 17

    페이지가 완전히 렌더링되기 전에 크롬 확장에서 '즉시'페이지에 CSS 스타일 적용

  18. 18

    React-페이지를 렌더링하기 전에 데이터 가져 오기

  19. 19

    NodeJS는 완전히 렌더링 된 HTML 페이지 가져 오기

  20. 20

    이전 작업이 완료되기 전에 작업이 시작됨

  21. 21

    가져 오기가 완료되기 전에 React.js 렌더링

  22. 22

    첫 번째 Jquery가 완료되기 전에 두 번째 Jquery json이 시작됨

  23. 23

    Jquery 지연됨-이전 함수가 완료되기 전에 함수 호출 연기

  24. 24

    Loaded 이벤트에서 렌더링이 완료되지 않았습니다.

  25. 25

    요청을 완료하기 전에 AWS Lambda 함수가 종료 됨

  26. 26

    요청이 완료되기 전에 Polymer iron-ajax 헤더 속성을 계산할 수 없습니다.

  27. 27

    비동기 메서드가 완료 될 때만 페이지 렌더링

  28. 28

    Polymer, 다른 요소를 렌더링하기 전에 core-ajax가 완료되기를 기다리는 방법은 무엇입니까?

  29. 29

    Spring-batch가 종료 상태로 종료 됨 : 실제 작업이 완료되기 전에 완료 되었습니까?

뜨겁다태그

보관