イシュー

sane-stack の Welcome to Ember.js はどこで描画しているのか

エントリーポイントから描画（render）まで

hoge/client/app/index.html（エントリーポイント）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Client</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for 'head'}}

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/client.css">

    {{content-for 'head-footer'}}
  </head>
  <body>
    {{content-for 'body'}}

    <script src="assets/vendor.js"></script>
    <script src="assets/client.js"></script>

    {{content-for 'body-footer'}}
  </body>
</html>

hoge/client/app/router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource("user", function() {});
});

export default Router;

hoge/client/app/templates/application.hbs（body ヘルパー）

<h2 id="title">Welcome to Ember.js</h2>

{{outlet}}

動き的には、

http://localhost:4200/ へリクエストすると、 hoge/client/app/templates/application.hbs を使って描画される
http://localhost:4200/user へリクエストすると、hoge/client/app/templates/user.hbs を使って描画される
ということは、templates 配下の hbsファイルをメンテナンスすればいい？

今日の疑問

application.hbs は誰が呼んでいるのか？
application.hbs の outlet 部分に何かを表示するにはどうすればいいのか？
- http://gihyo.jp/dev/serial/01/emberjs/0002?page=3
- outlet helperについて
index.html の content-for 'head' 部分や 'body-footer'部分に何か表示するにはどうすればいいのか？
{{content-for 'body'}} って何？

application.hts

参考

content-for

index.html に記載されている {{content-for}} ヘルパーはどのライブラリで提供されている？
参考
Please provide docs for `content-for` helper and how to use/disable it. · Issue #2407 · ember-cli/ember-cli · GitHub
- まぢでhow to useだよ
ember.js - {{content-for 'head'}} Ember-cli - Stack Overflow
ember-cli-inline-content
- 提供元は、ember-cli っぽい
- えっ、broccoli で動的に埋め込んでるってこと？？

ember-cli

Ember CLI | A command line utility for creating ambitious web applications
- ここに大体書いてある。sane を知るには ember-cli を知れってことだな

The app/index.html file lays the foundation for your application. This is where the basic DOM structure is laid out, the title attribute is set and stylesheet/javascript includes are done. In addition to this, app/index.html includes multiple hooks - {{content-for 'head'}} and {{content-for 'body'}} - that can be used by Add-ons to inject content into your application’s head or body. These hooks need to be left in place for your application to function properly, but they can be safely ignored unless you are working directly with a particular add-on.

app/index.htmlファイルは、アプリケーションの基盤となります。
これは、基本的なDOM構造がレイアウトされている場合には、タイトル属性が設定され、stylesheet / javascript が実行されます。
これに加えて、app/index.html には、複数のフックが含まれます。
- {{content-for 'head'}}と{{content-for 'body'}} - これらはアプリケーションのhead と bodyにコンテンツを注入するためのアドオンで使用されます。
これらのフックが正しく機能するようにアプリケーションの特定フォルダに設定される必要がありますが、そのアドオンを直接作業している場合を除き、無視しても問題ありません。