3

ページテンプレート/ビュー/またはそれらが呼び出されるものを制御するために、emberをどのように、または何をする必要があるかを理解しようとして、私はすべて迷子になりました。

ログインページ（およびおそらく他のいくつかのページ）に独自の「テンプレート」の外観を持たせ、すべての内部ページ（ログイン後）にナビゲーション付きの異なる「テンプレート」の外観を持たせたい[おそらく {{render} } 項目] など。

私は ember-tools を使用してテンプレート/モデル/コントローラーなどを生成するので、ember-build を実行するときにマージされる各ファイルに個別のファイルを用意します。

問題は、何に名前を付けるか、この状況 {{template}}、{{partial}}、{{outlet}}、および {{render}} で何を使用するのが適切かがわからないことです。

これまでのところ、

  • controllers/sessions/new_controller.js (ログインの処理用)
  • ルート/セッション/new_route.js
  • テンプレート/セッション/new.hbs
  • ビュー/application.js
  • templates/application.hbs WITH<script type="text/x-handlebars" data-template-name="application">{{outlet "sidebar"}}{{outlet}}</script>
  • ビュー/sidebar_view.js
  • templates/sidebar.hbs
  • ビュー/topbar_view.js
  • templates/topbar.hbs
  • index.htmlページWITH<script type="text/x-handlebars">{{yield}}</script>
  • 等...

ログインページに必要なのは、コントローラー、ルート、およびテンプレートファイルだけだと思います。しかし、問題は、サイドメニュー (動的に駆動される)、トップバー、およびページ上のコンテンツのようなものを持ち、それらとは異なる外観を持つ他のページに対して何をすべきかということです。それが私が混乱するところです。

誰かがまともなチュートリアルやサンプルを教えてくれますか? 私は ember.js のガイドを何度も読み直しましたが、これを理解することはできません。

注: この例http://jsfiddle.net/jorat1346/8tvRj/1/を見つけた後、これは私が探しているものと似ていると思いますが、私の質問はファイルをどのように分割するかです。

これらのようなものを独自のファイルに入れることはできますか

<script type="text/x-handlebars" data-template-name="login">
      <div class="container">
        {{outlet}}
      </div>


<script type="text/x-handlebars" data-template-name="main-template">
      <div class="container">
        {{outlet}}
      </div>
</script>

または、それらすべてをインデックスページに入れる必要がありますか?

4

2 に答える 2

2

これがメインのアプリケーション レベル テンプレートになります。これは、ヘッダー、フッター、およびテンプレートを含む可能性のあるアプリケーション全体でも発生します。式を介して他のテンプレートを挿入し{{outlet}}ます。

<script type='text/x-handlebars'>
<nav class='top-bar'>
    <ul>
        <li class='name'>
            <h1>{{#linkTo 'index'}}Home{{/linkTo}}</h1>
        </li>
        <li>
            {{#linkTo 'bookmarks'}}About{{/linkTo}}
        </li>
    </ul>
</nav>
<div class="container">
    <div class="row">
        {{outlet}}
    </div>
</div>

これで、メイン アプリケーション テンプレートで定義された {{outlet}} に挿入されるテンプレートごとに個別のビュー ファイルを持つことができます。

<script type="text/x-handlebars" data-template-name="about">
   <div class="about">
   </div>
</script>

BookMark以下の の例をご覧くださいEmberJs。 https://github.com/vinothbabu/emberjs-examples/tree/master/EmberJs%20-%20BookMark

于 2013-09-19T16:40:40.003 に答える