Backbone.js mit $ .getScript -Erweiterungsmodell

Question

Ich habe ein neues Backbone.js -Widget -Modell erstellt, das ich hoffe:

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

Abhängig von der Seite wird ein Benutzer anzeigt, dass eine Reihe von Widgets über AJAX geladen wird. Für jedes Widget werde ich so etwas tun:

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

Inhalt von "Widgets/Widget1":

$(function() {

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

});

In meiner Firebug -Konsole bekomme ich "piechartWidget ist nicht definiert". Ich weiß, dass das JavaScript erfolgreich geladen wird, ich kann das "Widget" -Modell einfach nicht ausgeht.

Answer 1

Ihr Widget ist in einer Funktion definiert. Die gesamte Variable, die erklärt, dass es nur sichtbar mit dem Umfang der Funktionen gibt.

$(function() {

  var pieChartWidget;

  // pieChartWidget is only visible here!

});

// pieChartWidget not visible here!

Um Zugriff auf das Widget von außerhalb der Funktion zu haben, müssen Sie es einer globalen Variablen (z. B. Ihrem Anwendungsnamespace) zuweisen. Sie können auch ein Fenster verwenden (nicht die bevorzugte Art und Weise).

Ihr Code sollte unverändert funktionieren, wenn Sie Ihr Widget wie so einem Fenster zuweisen:

$(function() {

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

});