Backbone.js con $ .getScript Extending Model

Question

He creado un nuevo modelo de widget de backbone.js que espero extender:

        var Widget = Backbone.Model.extend({
            constructor: function() {
              console.log('Widget constructor called.');
            }
        });

Dependiendo de la página, un usuario ve, se cargarán varios widgets a través de AJAX, por lo que para cada widget haré algo como esto:

        $.getScript('widgets/widget1', function(xhr){
            var widget1 = new pieChartWidget();
            widget1.render();
            widget1.update();
        });

Contenido de "widgets/widget1":

$(function() {

    var pieChartWidget = Widget.extend({
            render: function(json) {
              console.log('Widget render called.'); 
            },
            update: function(json) {
              console.log('Widget update called.'); 
            }
    });

});

En mi consola Firebug obtengo "PiechartWidget no está definido". Sé que el JavaScript se está cargando con éxito, simplemente no puedo extender el modelo "widget" de él.

Answer 1

Su widget se define dentro de una función. Entonces, toda variable declaró que solo hay visible con el alcance de las funciones.

$(function() {

  var pieChartWidget;

  // pieChartWidget is only visible here!

});

// pieChartWidget not visible here!

Para tener acceso al widget desde fuera de la función, debe asignarlo a una variable global (por ejemplo, su espacio de nombres de aplicaciones). También puede usar la ventana (no de la manera preferida).

Su código debería funcionar sin cambios si asigna su widget a la ventana así:

$(function() {

  window.pieChartWidget = Widget.extend({
        render: function(json) {
          console.log('Widget render called.'); 
        },
        update: function(json) {
          console.log('Widget update called.'); 
        }
});

});