2

WebアプリでEmberJSをpre1からpre2に更新しようとしましたが、すべてのハンドルバーテンプレートが最後の本文要素として配置され、場合によってはまったく配置されていないことに気付きました。

テンプレートが間違った場所に追加されることを示すために、テンプレートの前後にdivを配置するという簡単な変更を加えて、スターターキットを使用して再現を作成しました。この同じページをpre1で実行すると、すべて正常に機能します。

index.html

...。

<body>
  <div>this is before the template</div>
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Hello from Ember.js</h1>
  </script>
  <div>this is after the template</div>

...。

4

1 に答える 1

5

text / x-handlebarsスクリプトタグは、ハンドルバーテンプレートを定義し、ページ内のどこに配置するか（頭の中、本文のどこにでも）は関係ありません。

上記のコードで、のテンプレートを定義しますApplicationView。ルーターを使用しているため、emberはルーターを自動的に作成ApplicationViewし、Emberアプリのルート要素に追加します。デフォルトでは、rootElementは本体です。

App.ApplicationView.create().appendTo(rootElement) // default rootElement = 'body'

appendToメソッドはjQueryappendToを使用します：

this.$().appendTo(target)

したがって、が挿入される場所を制御する場合は、次のようにAppインスタンスでapplicationViewを設定する必要があります。rootElement

  window.App = Ember.Application.create({
    rootElement: '#insert_my_app_here'
  });

..。

  <body>
    <div>this is before the template</div>
    <script type="text/x-handlebars" data-template-name="application">
      <h1>Hello from Ember.js</h1>
    </script>
    <div id="insert_my_app_here"></div>
    <div>this is after the template</div>
  </body>
于 2012-11-10T20:57:03.440 に答える