2012-05-08 1 views
0

特定の回答以上ビューコードを構造化する方法を決定する際のベストプラクティスに関する推奨事項を取得しようとしています。私の現在のプロジェクトでは、ビューに対するモデルの明確なマッピングがありますが、これらはすべて、グローバルナビゲーション要素を備えたかなり標準的なコンテナ内に表示されています。この質問のために、このようにそれを描く:Backboneのラッパーまたはサブビューを表示 - ベストプラクティスまたは推奨事項

  • ヘッダー
    • タブ
  • カード
    • カード1
    • カード2
    • カード3

ヘッダータブをクリックするとカードが挿入されます。カード自体に戻るボタンがあり、前に表示されたカードが表示されます。カードの実際の内容は、おそらくモデルにマップされる別のビューによって生成されます。私は、iOSやAndroidの一般的なインターフェースパターンとはそれほど違いはないと思います。

とにかく、「カード」と呼ばれるビュークラスを、カード用のナビゲーションを備えたテンプレートと、すべてのカードに入っているものと一緒にしたいと考えています。それから私は何とかカードの内容をそれに渡したいと思います。

私はCardクラスを作成し、それを拡張してサブクラス(つまり、サブビュー)を作成できますか?だから、私はUserModelというモデルとそのモデルのために、フォームの世話をするビューと呼ばれるUserViewを持っていると言う、私のような何かをしたい:その結果を持ってレンダリングする際に続いて

var Card = Backbone.View.extend(); 
var UserView = Card.extend(); 

を、で言う:

<!-- code from Card --> 
<div class="card"> 
    <nav></nav> 

    <!-- code from UserView --> 
    <div class="user"> 
     ... 
    </div> 
    <!-- END code from UserView --> 


</div> 
<!-- code from Card --> 

私はこれを行う簡単な方法は、私がラップする必要があるすべてのビューからカードテンプレートを手作業で取得することだと気づいていますが、それは間違っています。

それは意味がありますか?

ああ...私はこれが望んでいると思っている利点の一部は、私がUserViewインスタンスと対話して、それらが親クラスに必要なメソッドをトリガできることです。だから...

var uv = new UserView(); 
uv.render() // <- should render the user view with the card wrapped around it. 

もちろん、カードを手動でレンダリングする必要はありません。

どのように構造化しますか?

ありがとうございます!

答えて

0

ベストプラクティスを具体的に尋ねてきたので、バックボーンを始めようとしているようですが、最初にいくつかの基礎から始めましょう。

バックボーンには、テンプレートエンジンで定義されたビューがあります。デフォルトのテンプレートエンジンはunderscore.jsですが、はるかに優れたテンプレートエンジンはmustache.js以上ですが、より高いレベルのラッパーhandlebar.js(HandleBarJS Website)です。これは、あなたのビューを構造化して、以下で説明するようにすべて正確に1つのテンプレートにサブビューし、ロジックで塗りつぶされ、大きなレンダリングイベントが1つだけ表示されるようにします。

モデルを注入するための優れたテンプレートが得られたので、レンダリングイベントをうまく実行したいので、テンプレートをプリコンパイルすることを確認してください。これがなぜ必要なのかを理解する良い理由のために、この記事(Performance benefit of Precompiling templates)を読んでください。 Handlebar.jsにはテンプレートをプリコンパイルするメソッドがありますので、サンプルはここには載せません。

最後のステップは、あなたのモデルを構築することです。 JSON形式でビルドした場合、モデルを使ってテンプレートを単に実行することができます。

var context = {title: "My New Post", body: "This is my first post!"} 
var html = template(context); 

テンプレートの作成がはるかに簡単私見であるように私は、例示の目的のためにハンドルを使用していたが、本当に何がこのモデルで動作します。

あなたが正しい道に辿り着くことを望みます。

関連する問題