Lifecycle of variable in AMD module

Question

Below is the code which I saved as a file named listView.js. I wonder about how the inner variable working. For example, variable dtRngPckr is defined in the initialize within Backbone.View and whenever application move to the other part, I called onClose function to null the said variable. And when I need to reuse this module, there must be an error occur in render function. It triggered error not a function

define(function (require) {
    "use strict";
    var $        = require('jquery'),
        _        = require('underscore'),
        Backbone = require('backbone'),
        dtRngPckr;

    return Backbone.View.extend({
       initialize: function (opt) {
           dtRngPckr = require('daterangepicker');
       },
       render: function () {
          dtRngPckr();
       },
       onClose: function () {
          dtRngPckr = null;
       }
    });
});

Could someone tell me how's exactly this variable working

Answer 1

RequireJS caches the return value of a module so it only has to fetch it once, all prior variables are shared between the instances. To use a separate daterangepicker for each instance, you could attach it to your view:

return Backbone.View.extend({
   initialize: function (opt) {
       this.dtRngPckr = require('daterangepicker');
   },
   render: function () {
      this.dtRngPckr();
   },
   onClose: function () {
      this.dtRngPckr = null;
   }
});