6
ember.jsハンドルバーテンプレートを複数のファイルに分割して、コードベースをより管理しやすくしたいと考えています。テンプレートと別々のファイルを分割するために、emberと一緒につまらないハンドルバーを使用する
yeoman/gruntを使用しているので、私はthis handlebars pluginに出会った。私は以下のように設定しました：
handlebars: {
compile: {
options: {
namespace: 'JST'
},
files: {
'<%= yeoman.dist %>/scripts/templates.js': [
'<%= yeoman.app %>/templates/*.hbs'
],
}
}
}
プラグインの「使用例」セクションに示唆されています。これは期待どおりに動作しており、dist/scripts/templates.jsファイルを生成しています。しかし、テンプレートを 'JST'名前空間に入れるとEmberにはアクセスできなくなります。これは私が取得していますエラーです：
Uncaught Error: assertion failed: You specified the templateName application for <App.ApplicationView:ember312>, but it did not exist.
をいくつかの質問：エンバーはそれらを見つけることができるように
- は、どのように私は、
templates.jsに今あるハンドルテンプレートを、「初期化する」ことができますか？ - テンプレートがDOM内にどこに配置されるかをemberに伝えるにはどうすればよいのですか？
これは私のindex.htmlです：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.min.css"/>
<link rel="stylesheet" href="styles/css/font-awesome.min.css"/>
<link rel="stylesheet" href="styles/font-styles.css"/>
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!-- My templates used to be here, but now they are in templates.js -->
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</script>
<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery-1.9.1.js"></script>
<script src="scripts/vendor/handlebars.1.0.rc.3.js"></script>
<script src="scripts/vendor/ember-1.0.0-rc.2.js"></script>
<script src="scripts/vendor/ember-data.js"></script>
<script src="scripts/vendor/bootstrap.min.js"></script>
<script src="scripts/templates.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>
ちょうどあなたのバックエンドですか？ –