$ .getScript拡張モデルを備えたbackbone.js

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

});