作成中のBackbone.jsビューのライフサイクル

Question

私はbackbone.jsが新しく、フロントエンドの作業にも若干新しく、ライフサイクルの仕組みをまだあまり理解していません。

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

私が現在持っている問題は、グラフを描画しようとしていますが、描画関数はレンダリング関数中に存在しないため、IDに基づいてビューを見つけられませんが、私は認識しませんこれを後のフェーズで達成する方法があります。

ページが完全に読み込まれており、それが動作した後、私はクロームコンソールで手動でビューを作成しようとしました：

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. 私のアーキテクチャは根本的に欠陥がありますか？私はこれを何か全く違うやり方でしようとするべきですか？

Answer 1

FWIW、あなたは正しい方向にいると思います。しかし、あなたの質問に注意して、あなたはちょうどいくつかのものを順番に持っています。

厳密に言えば、バックボーンビューにはライフサイクルがあまり組み込まれていません。インスタンス化すると、initializeが呼び出されます。それ以外は、ビューのライフサイクルを決めるのはあなた次第です。それがレンダリングされるとき。レンダリングされたelがDOMにアタッチされるとき、それが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(); 

希望します。

Answer 2

私は問題は、レンダリングする前にテンプレートがサーバーから返されないということだと思うので、表示されません。 jQueryのdeferredオブジェクト（this refを参照）を使用してこの問題を回避することができます。

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

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

がBACKBONE.JSにDeferredの作り方にもDerickベイリーの記事を参照してください：initializeの終わりのようなものをやってみhttp://lostechies.com/derickbailey/2012/02/09/asynchronously-load-html-templates-for-backbone-views/

Answer 3

あなたがDOMに取り付けるエルを作成するが、していない、と私チャートがそれ自身にアタッチする要素のDOMだけを検索すると思われます。 drawGraphを呼び出す前にDOMにアタッチする必要があります。

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