Backbone.js с моделью расширения $ .getScript - PullRequest
Новая
       17

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

0 голосов
/ 29 ноября 2011

Я создал новую модель виджетов 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();
        });

Содержимое "widgets / widget1": 

$(function() {

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

});

В моей консоли Firebug я получаю "pieChartWidget не определен"Я знаю, что Javascript загружается успешно, но я просто не могу расширить модель "Widget".

1 Ответ

1 голос
/ 29 ноября 2011

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

$(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.'); 
        }
});

});

...