在Javascript中本地更新全局變量

Question

我通過實現一個簡單的項目開始學習Backbone.js庫。 看了一些教程之后，我制作了下面的代碼。 我知道這可能看起來並不完美，因為我是javascript開發新手。

因此，在下面，我從API獲取國籍列表，然后從這些特定國家/地區獲取學生人數。 目前這似乎很清楚，但是問題是，我需要獲得每個國籍的學生總數，這就是為什么第二個集合獲取函數中有一個計數器。 我面臨的問題是關於Javascript的。 基本上，我需要做的是在全局范圍內定義“總計”並在本地進行更新。 我遇到了許多與此線程相似的線程，但是老實說，我對它的理解不夠深刻，無法重現我自己的解決方案。 再一次，我的問題是如何重新設計該代碼，以便可以在本地更新變量“ total”的值，然后在內部訪存函數之外使用更新后的結果。 感謝您的回答和建議。 提前致謝。

    $.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

骨干網試圖推廣一種事件驅動的方法。
我認為您最終將獲得一個事件聚合器。

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

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

從調用代碼中，觸發事件：

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

Answer 2

嘗試使用： {async: false} // Ajax-JQuery：執行異步HTTP（Ajax）請求

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

讓我知道它是否有效。

Answer 3

結帳控制台輸出，你應該看到Total:0 第一則預期值，如果AJAX調用工作原理設計的。 這是按設計方式工作的，因為fetch選項中的回調函數將在函數調用fetch完成后被調用。

根據您的設計，由於主干集合支持.length約定，因此您不需要全局變量total 。 請參見http://backbonejs.org/#Collection-length獲取功能完成時。 參見http://backbonejs.org/#Collection-fetch

Answer 4

我認為您正在尋找的是一種在視圖內任何地方操縱total的方法。 在我希望變量對我所有視圖方法都是“全局”的情況下，我傾向於將其設為視圖的屬性。 我的意思是

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
  }
});

由於collection fetch是ajax GET的包裝器（除非您覆蓋Backbone.sync ），它將異步運行。 如果要與獲取同步運行代碼，則可以做三件事。

1. 像在代碼中一樣使用回調函數
2. 使用延遲/承諾回調（非常類似於1）。
3. @KimGysen的話做：Backbone具有用於設置和響應事件的可靠API。 （Marionettejs在非常酷的方向上擴展了此API）。