6

私は MVC スタイルの JavaScript ライブラリを初めて使用するので、この質問が基本的すぎる場合はご容赦ください。jQueryとagility.jsで完全にシングルページ アプリケーションを作成しようとしています。agility.jsドキュメントに示されている例は、ドキュメント ルートに html 要素を追加するだけで構成されています。質問: コンポーネントごとにページを組み立てる「ベスト プラクティス」の方法はありますか。

私のhtmlアプリの大まかな概要は次のとおりです。

<html>
    <head> ... </head>
    <body>
        <header> ... </header>
        <div id=PageHolder>
            <div id=AppPane_1></div>
            <div id=AppPand_2></div>
        </div>
        <footer> ... </footer>
    </body>
</html>

「AppPane」div 内には、アプリケーションのコンテンツがあります。

さて、これらすべてを考えると、私は何ができるかを尋ねているのではなく、何をすべきかを尋ねています。

ドキュメントと私の調査から、3つの選択肢があることがわかりました。

  1. jQueryアトミック アジリティ オブジェクトからページ構成を作成し、それらをドキュメント対応ブロック にまとめます。$$.document.append(Foo)ルート要素に対しては機能しますが、Foo の子を foo に追加する方法がわかりませんでした。
  2. 上から基本的な静的htmlをレイアウトし、関数を使用してそれにコントロールなどを追加する1つの（非常に大きな）アジリティオブジェクトを使用しcontrollerます（これも機能しませんでした）
  3. 1 つのルート アジリティ オブジェクトを使用し、ビューを使用してすべての子オブジェクトをそのオブジェクトに追加します (どういうわけか、私はそれを機能させることができませんでした。)

これらのうちどれが最適で、関連する構文は何ですか? 事前に感謝します。html コンポーネントを適切なアジリティ アプリに組み立てる際のガイダンスをいただければ幸いです。

http://jsbin.com/ojenon/1/

4

2 に答える 2

3

私の意見では、ページ モジュールを整理する最善の方法は、個々のクライアント側テンプレートを head 内のスクリプト タグに保存することです。

<html>
<head>
<script type="text/template" id="template1">
    <b>Some <abbr>HTML</abbr> template</b>
</script>
<script type="text/template" id="template2">
    <b>Some <abbr>HTML</abbr> template</b>
</script>
</head>
...

jQuery.template や handlebars.js などのテンプレート言語を使用して、ロジックや変数の補間などを容易にすることもできます。

次に、コントローラーで、これらのテンプレートのスクリプト タグの html コンテンツを DOM から読み込み、必要に応じて目的の div (#PageHolder) にコピーします。

この手法に代わる方法は、テンプレートを head 内のリテラル JS オブジェクトに格納することです。

<script type="text/javascript">
var Templates = {
    template1: "<b>Some <abbr>HTML</abbr> template</b>"
    ...
}
</script>

これは始まりにすぎない。テンプレートを事前にコンパイルする、冗長なテンプレート コンパイルを避けるためにテンプレートを分割するなど、さらに多くのオプションがあります。構造的な観点からは、専用の場所にテンプレートを維持することで、シングル ページ アプリのスケーリングに役立ちます。

于 2012-10-28T03:38:07.623 に答える
2

私が推測するコースの馬ですが、私の好みは、すべてが一緒に見えるように、アジリティ コードと一緒にテンプレート コードを配置することです。ビュー オブジェクト内で html とスタイルを表示するのは特に好きではありませんが、これらを他の変数で設定し、次のようにビューで参照することができます。

var frmMainTemplate = '<div>' + 
                        '<input type="text" data-bind="name" />' +
                        '<p>You typed <span data-bind="name" /></p>' + 
                      '</div>'; 
var frmMainStyle = '& span {background-color:#888; color:#fff;}';

var frmMain = $$({
  model: {name:''},
  view: {
    format: frmMainTemplate, 
    style: frmMainStyle
  },
  controller: {}   
});

$$.document.append(frmMain);
于 2013-07-26T11:00:46.960 に答える