読者です 読者をやめる 読者になる 読者になる

sane-stack の Welcome to Ember.js

イシュー

  • 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 部分に何かを表示するにはどうすればいいのか?
  • index.html の content-for 'head' 部分 や 'body-footer'部分に何か表示するにはどうすればいいのか?
  • {{content-for 'body'}} って何?

application.hts

参考

content-for

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にコンテンツを注入するためのアドオンで使用されます。
  • これらのフックが正しく機能するようにアプリケーションの特定フォルダに設定される必要がありますが、そのアドオンを直接作業している場合を除き、無視しても問題ありません。