Backbone.js с $ .getScript расширяющейся моделью

Question

Я создал новую модель виджетов Backbone.js, которая, я надеюсь, расширит:

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

В зависимости от страницы, просмотр пользователя будет загружено ряд виджетов через AJAX, поэтому для каждого виджета я сделаю что -то вроде этого:

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

Содержание "виджетов/виджета1":

$(function() {

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

});

В моей консоли Firebug я получаю «Piechartwidget не определено». Я знаю, что JavaScript успешно загружается, я просто не могу расширить из него модель «виджет».

Answer 1

Ваш виджет определяется в функции. Таким образом, вся переменная объявлена, что есть только видимые с тем, чем функции.

$(function() {

  var pieChartWidget;

  // pieChartWidget is only visible here!

});

// pieChartWidget not visible here!

Чтобы иметь доступ к виджету извне функции, вы должны присвоить его глобальной переменной (например, пространство имен приложений). Вы также можете использовать окно (не предпочтительный путь).

Ваш код должен работать без изменений, если вы назначаете свой виджет на окно, как:

$(function() {

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

});