자바 스크립트에서 전역 변수 업데이트하기

Question

간단한 프로젝트를 구현하여 Backbone.js 라이브러리를 배우기 시작했습니다. 튜토리얼을보고 나면 아래 코드와 같은 코드가 생성됩니다. 나는 자바 스크립트 개발에 익숙하지 않기 때문에 완벽하지는 않을지도 모른다는 것을 알고있다.

아래에서 API에서 국적 목록을 가져온 다음 특정 국가의 학생 수를 확인합니다. 이것은 당분간 분명하지만 문제는, 나는 두 번째 컬렉션 가져 오기 기능에 카운터가있는 이유 인 국적 별 전체 학생을 확보해야한다는 것입니다. 내가 직면하고있는 문제는 자바 스크립트에 관한 것입니다. 기본적으로 "전체"를 전역으로 정의하고 로컬로 업데이트하는 것은 내가해야 할 일입니다. 이 스레드와 비슷한 많은 스레드가 있지만 솔직히 말해서 내 솔루션을 재현 할만큼 충분히 이해하지 못했습니다. 다시 한번, 내 질문은이 코드를 다시 엔지니어링하여 "total"변수의 값을 로컬로 업데이트 한 다음 내부 인출 함수 외부에서 업데이트 된 결과를 사용할 수있는 방법입니다. 당신의 답변과 조언에 감사드립니다. 미리 감사드립니다. 설계대로 AJAX 호출이 작동하는 경우

$.ajaxSetup({ 
    crossDomain : true, 
    cache : false, 
    contentType : "application/json", 
    dataType : "json" 
}); 

var baseURL = "http://lucalongo.eu:80/courses/2014-2015/questionnaireDIT/app/index.php"; 


var mModel = Backbone.Model.extend({}); 

var cNationality = Backbone.Collection.extend({ 
    model: mModel, 
    url: this.baseURL + "/nationalities" 
}); 

var cStudent = Backbone.Collection.extend({ 
    model : mModel, 
    initialize : function(models, options) { 
     this.url = "http://lucalongo.eu:80/courses/2014-2015/questionnaireDIT/app/index.php/students/nationality/" + options.id; 
    } 
}); 

var vView = Backbone.View.extend({ 

    render: function(){ 
    var total = 0; 
    this.collection = new cNationality(); 
    this.collection.fetch({ 
     success: function(c){ 
      _.each(c.models, function(col) { 
       var nationalDesc = col.toJSON().description; 
       var nationalID = col.toJSON().id; 
       var studentNationality = new cStudent([], {id : nationalID}); 
       studentNationality.fetch({ 
        success: function(c){ 
         //console.log(nationalDesc + ": " + c.length); 
         total = total + c.length; 
         console.log(total); 
        } 
       }); 
      }); 

     } 
     }); 
     console.log("Total:" total); // still displays 0 
    } 
}); 


var v = new vView(); 
v.render(); 
Backbone.history.start({pushState: true}); 

Answer 1

체크 아웃 콘솔 출력, 당신은 Total:0첫번째 후 기대 값을 볼 수 있습니다. fetch 옵션의 콜백 함수는 뒤에 이 호출되고 fetch 함수 호출이 완료되기 때문에 이것은 설계된대로 작동합니다.

디자인에 따르면 total은 백본 컬렉션이 .length 규칙을 지원하기 때문에 전역 변수가 필요하지 않습니다. http://backbonejs.org/#Collection-length 가져 오기 기능이 완료되면 참조하십시오. http://backbonejs.org/#Collection-fetch

Answer 2

백본은 이벤트 중심 접근 방식을 시도합니다.
궁극적으로 이벤트 수집기로 끝날 것이라고 생각합니다.

var increment = 5 //Just an example 
APP.vent.trigger("update:counter", increment); 

Answer 3

내가 당신을 위해 무엇을 찾고있는 것은 어디 뷰 내에서 total를 조작 할 수있는 방법이라고 생각 : 호출 코드에서

window.APP = {}; 
APP.vent = _.extend({}, Backbone.Events); 

APP.vent.on("update:counter", function(increment){ 
    APP.counter = APP.counter + increment; 
}); 

, 당신은 이벤트를 트리거합니다. 모든 뷰 메서드에 변수를 "전역"으로 지정하려는 경우 뷰의 속성으로 사용하는 경향이 있습니다. 무슨 말인지

var vView = Backbone.View.extend({ 

    initalize: function(){ 
    // Initialize your object property 
    this.totalCount = 0; 
    }, 

    render: function() { 
    // Inside callbacks you will lose your view context 
    // so save it 
    var that = this; 
    // Nested collection fetch 
     success: function(c){ 
     that.totalCount = that.totalCount + c.length; 
     console.log(that.totalCount); 
     } 
    // rest of code 
    } 
}); 

컬렉션 가져

가 비동기 적으로 실행됩니다 아약스 GET의 래퍼 (당신이 Backbone.sync를 오버라이드 (override)하지 않는 한)입니다입니다. 가져 오기와 비동기로 코드를 실행하려면 세 가지 작업을 수행 할 수 있습니다. 백본은 설정 및 응답을위한 견고한 API가 있습니다

1. 를 사용하여 콜백 함수 코드에서처럼
2. 사용/이연은 (1. 매우 비슷한) 콜백
3. 가 @KimGysen의 말씀 마십시오 무엇을 약속 이벤트에. (Marionettejs는이 API를 아주 멋진 방향으로 확장합니다).사용

Answer 4

시도 : {async: false} // Ajax-JQuery: Perform an asynchronous HTTP (Ajax) request

this.collection.fetch({async: false}, { 
    success: function(c) { 
     _.each(c.models, function(col) { 
      var nationalDesc = col.toJSON().description; 
      var nationalID = col.toJSON().id; 
      var studentNationality = new cStudent([], { 
       id: nationalID 
      }); 
      studentNationality.fetch({ 
       success: function(c) { 
        //console.log(nationalDesc + ": " + c.length); 
        total = total + c.length; 
        console.log(total); 
       } 
      }); 
     }); 

    } 
}); 

링크를 도움이 될 수 있습니다 : Backbone.Sync

가 작동하는지 알려주세요.