0

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

  • ヘッダ
    • タブ
  • カード
    • カード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.

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

どのように構成しますか？

ありがとう！

4

1 に答える 1

0

特にベストプラクティスを求めていて、バックボーンを始めているように見えるので、最初にいくつかの基本から始めましょう。

バックボーンには、テンプレートエンジンで定義されたビューがあります。デフォルトのテンプレートエンジンはunderscore.jsですが、はるかに優れたテンプレートエンジンはmustache.js以上ですが、より高レベルのラッパーhandlebar.js（HandleBarJS Webサイト）です。これにより、以下で説明するのとまったく同じようにビューとサブビューを構造化して、ロジックで埋めるためのマーカーを備えた1つのテンプレートにまとめることができます。これにより、1つの大きなレンダリングイベントのみになります。

モデルを挿入するための優れたテンプレートができたので、そのレンダリングイベントを適切に実行したいので、テンプレートをプリコンパイルしてください。これが必要な理由を理解するための十分な理由として、この記事を読んでください（テンプレートのプリコンパイルによるパフォーマンス上の利点）。Handlebar.jsにはテンプレートをプリコンパイルするメソッドがあるため、ここではサンプルを提供しません。

最後のステップは、モデルを構築することです。JSON形式でビルドする場合は、モデルを使用してテンプレートを「実行」するだけです。

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

テンプレートの作成は私見でははるかに簡単なので、説明の目的でハンドルバーを使用しましたが、実際にはこのモデルでは何でも機能します。

それがあなたを正しい道に導いてくれることを願っています。

于 2012-05-10T19:13:57.260 に答える