Backbone.jsコントロールとウィジェットの再利用

Question

Backbone.jsで書かれたUIコンポーネントを再利用するための良いモデルはありますか？

私のチームは大部分がサーバーサイドコードで書かれた大規模なWebアプリケーションを管理していますが、私たちはますますクライアント側の作業を行っていることがわかりました。私たちはjQueryで書かれたいくつかの大きなUIコンポーネントを持っていますが、DOM操作ライブラリだけで管理するにはあまりにも複雑です。クライアント側のアプリケーションフレームワークが必要です。

jQueryプラグインモデルが提供する素晴らしいことの1つは、再利用の容易さです。適切なIDを持ついくつかのHTML要素を作成し、$(function(){})で配線します。私たちが採用すれば、Backboneと同様のものを達成する必要があります。

ほとんどの例は、バックボーンでアプリケーションを構築する方法を示していますが、これは素晴らしいことですが、すぐにJavaScriptでアプリケーションを再実装することはできません。クライアント側のフレームワークを使用することは、複雑なUIコントロールと多くのビジネスロジックを使用することに限定されます。

もう1つの考慮すべき点は、JavaScriptのバンドルソリューションが用意されていることです。バックボーンの要素をまとめてバンドルすると、バックグラウンドでロードおよび実行されるヘッドレスコントロールが実現する可能性があります。

バックボーンコントロールを作成してjQueryプラグインとしてパッケージ化できますか？この種のアーキテクチャーに関する優れたリソースはありますか？

Answer 1

私にとっては、バックボーンを使用する上で最も重要な部分の1つは、本質的にあなたが何を記述しているかです。バックボーンのオブジェクト指向性は、イベント/テンプレート/データをバインドすることができる特定の「ウィジェット」や他の再利用可能なコードを構築することを本当に簡単にします。 Backboneの構文よりも多くの利点を提供しないため、これらのjQueryプラグインを必ずしも作成する必要はありません。

たとえば、コントロールクラスを作成し、クリックイベントをバインドしてfooメソッドをトリガーすることができます。

var Control = Backbone.View.extend({ 
    id:null, 
    events: { 
     'click' : 'foo' 
    }, 
    foo: function(){ 
     console.log(this.id); 
    } 
}) 

DOM要素でこの動作を使用するたびに、新しいControlオブジェクトを作成し、jQueryを使用して要素にバインドします。

//I say foo when you click me 
var foo = new Control({el: $("#foo"), id:'foo' }); 

//I say bar when you click me 
var bar = new Control({el: $("#bar"), id:'bar' }); 

（あなたが実行可能にjQueryプラグインにこれ​​らの呼び出しをラップすることができ）

このワークフローがどうなるか表示する本当に簡単な例は、バックボーンのモデル/コレクションとアンダースコアのには本当に激しい得ることができますいくつかの本当に堅牢なダイナミックな再利用可能なクラスを作成するためのテンプレートエンジンです。