7

私は backbone.js が初めてで、フロントエンドの作業もやや初めてで、ライフサイクルがどのように機能するかをまだよく理解していません。

基本的にフレームとしてのみ使用するhtmlテンプレートを提供するDjangoバックエンドがあります。すべてのロジックはバックボーン ビューで処理されます。

私が現在抱えている問題は、グラフを描画しようとしているが、レンダリング機能中に存在しないため、グラフ機能が id に基づいてビューを見つけられないことですが、方法を知りません後の段階でこれを達成します。

ページが完全に読み込まれて動作した後、Chrome コンソールでビューを手動で作成しようとしました。

   var main = new MainView();
   main.showChart();

景色：

   var ChartView = Backbone.View.extend({

     title: 'Chart',

     initialize: function() {

    // This assures that this refers to this exact view in each function
    // (except within asynchronous functions such as jquery each)
    _.bindAll(this);

    // Saving parameters given by parent
    this.index = this.options.index;

    // Retrieve the template from server
    var template = _.template(getTemplate('chart.html'));

    // Compile the template with given parameters
    var compiledTemplate = template({'title': this.title});

    // Set the compiled template to this instance's el-parameter
    this.$el.append(compiledTemplate);

    // Rendering the view
    this.render();
 },

   render: function() {

    var self = this;

    // Draw the graph when the page is ready
    $(function(){
        self.drawGraph('chart1', this.line1Data);
    });

    // Render function should always return the instance
    return this;
},

drawGraph : function(chartId, lineData) {

    Morris.Line({
          element: chartId,
          data: [
            {y: '2012', a: 100},
            {y: '2011', a: 75},
            {y: '2010', a: 50},
            {y: '2009', a: 75},
            {y: '2008', a: 50},
            {y: '2007', a: 75},
            {y: '2006', a: 100}
          ],
          xkey: 'y',
          ykeys: ['a'],
          labels: ['Series A']
    });
},

});

作成場所:

     var chartWidgetView = new WidgetView({'contentView': new ChartView()});
    this.initializeWidget(chartWidgetView);
    this.$el.append(chartWidgetView.el);

誰かが私に明確にすることができますか：

  1. バックボーンは実際にビューの作成をどのように処理しますか? さまざまな段階とは何ですか？
  2. この状況をどのように処理すればよいでしょうか。たとえば、コードのどの時点で html テンプレートの要素が存在し、グラフ関数を呼び出すことができるでしょうか?
  3. それとも私のアーキテクチャに根本的な欠陥があるのでしょうか? まったく別の方法でこれを行う必要がありますか？
4

3 に答える 3

11

FWIW、あなたは正しい軌道に乗っていると思います。しかし、あなたの質問が指摘しているように、あなたはいくつかのことを順不同にしています。

厳密に言えば、バックボーン ビューに組み込まれているライフ サイクルはあまりありません。インスタンス化すると、initialize が呼び出されます。それ以外では、ビューのライフサイクルをどうするかはあなた次第です。いつレンダリングされるか。レンダリングされelたものが DOM にアタッチされるとき、DOM から削除されるとき、閉じられて破棄されるとき。それはすべて、ビューをどのように操作するかによって異なります。

もちろん、このライフサイクルを理解しやすくするために行ったり追加したりすることがいくつかあります。たとえば、バックボーンの上にある優れたフレームワークがいくつかあります。このための出発点として、LayoutManager、Thorax、Chaplin、および私自身の Marionette を検討することをお勧めします。

ただし、質問の要点は、プラグインを実行する前に、説明しているプラ​​グインが DOM にある HTML 要素に依存している可能性が非常に高いということです。これは、位置情報、CSS 情報、相対アイテムの位置などを取得する必要があることが多いため、ビジュアル プラグインでは一般的です。

これらのタイプのプラグインを容易にし、これを機能させるためにできる非常に簡単なことがいくつかあります。私はそれについて少しブログを書いています: http://lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls-with-backbone/ - うまくいけば、それはあなたを理解するのに役立ちます道を下ります。

特に注目したいのは、onShowメソッドのアイデアです。これは、Backbone が独自に理解できる方法ではありません。これは、ビューとアプリに追加する必要がある概念です。しかし、良いニュースは、それが簡単だということです。メソッドをビューに追加して、適切なタイミングで呼び出すだけです。


var AnotherView = Backbone.View.extend({
  onShow: function(){
    this.$el.layout({ appDefaultStyles: true});
  }
});


// instantiate the view
var view = new AnotherView();

// render it
view.render();

// attach it to the DOM
$("#someDiv").html(view.el);

// now that it has been attached to the DOM
// you can call your DOM-dependent plugins
view.onShow();

それが役立つことを願っています。

于 2012-08-15T03:57:36.617 に答える
1

あなたはelを作成していますが、それをDOMにアタッチしていません。チャートは、それ自体をアタッチする要素をDOMのみで検索していると思われます。drawGraphを呼び出す前に、それをDOMにアタッチする必要があります。

バックボーンビューの作成に関しては、詳細なビューを取得するための最良の方法は、実際にはそれほど長くない注釈付きのソースコードを読み取ることだと思います。

于 2012-08-14T21:44:21.157 に答える
1

これをちらっと見るだけで、レンダリングする前にテンプレートがサーバーから返されないため、表示されないことが問題だと思います。この問題は、jQuery のdeferredオブジェクトを使用して回避できます (この参照を参照)。の最後で次のようにしてみてくださいinitialize:

this.deferredTemplate = $el.append(compiledTemplate);

this.deferredTemplate.done(function() {
  this.render();
});

backbone.js の deferreds に関する Derick Bailey の記事も参照してください。

于 2012-08-14T21:11:54.540 に答える