编程的方式定义模板车把足够简单，我不希望在我的html文件是否可以使用脚本标签加载车把模板？或Ember.js
来定义我的车把模板，我想这
<script type="text/x-handlebars" data-template-name="nav-bar" src="template.handlebar"></script>
但这并没有工作。我能否以编程的方式定义我的模板模板，或者甚至只是加载handlebar文件，这样我就可以重复使用，而且我感觉它使事情变得更容易维护。
我试着用ajax加载它们并将它们追加到头部，这很好，我可以在那里看到它，但是ember.js在ember已经加载并且模板没有被定义后没有读取它。
或定义编程在Ember.js车把模板
您可以通过使用Ember.Handlebars.compile编程的方式定义模板，请参阅http://jsfiddle.net/pangratz666/wxrxT/：
Ember.View.create({
personName: 'Dr. Tobias Fünke',
template: Ember.Handlebars.compile('Hello {{personName}}')
}).append();
或者添加编译模板Ember.TEMPLATES阵列，请参阅http://jsfiddle.net/pangratz666/58tFP/：
Ember.TEMPLATES['myFunkyTemplate'] = Ember.Handlebars.compile('Hello {{personName}}');
Ember.View.create({
personName: 'Dr. Tobias Fünke',
templateName: 'myFunkyTemplate'
}).append();
我会建议使用一些工具，如理查德文澜说。另外请看interline/ember-skeleton，它提供了编译模板的支持。
这是可能的，但您需要先预编译模板。这也将允许您将所有模板包含在一个文件中。
之后，您将需要包括JavaScript文件。
<script src="path/to/compiled/templates.js" type="text/javascript"></script>
我不相信你可以编译Ember.Handlebars W /标准的把手工具。 – thesmart 2013-08-08 19:40:00
所以，因为我还是想单独的文件中我的模板，我不想在JavaScript的字符串来定义他们，我砍死了一起昨晚
这是一个同步的延迟加载，它加载所有的模板第一，然后余烬和我的代码的其余部分，
//fake function so that every loads fine will get redefined in application.js
function initializeApp(){}
function loadTemplates(){
var arg = arguments[0],
next = Array.prototype.slice.call(arguments,1);
if(typeof arg != 'string'){
arg()
}else{
var scriptObj = document.createElement('script');
scriptObj.type = 'text/x-handlebars';
$(scriptObj).attr('data-template-name', arg.replace('.handlebars', '').substring(arg.lastIndexOf('/')+1))
$.get(arg, function(data){
scriptObj.text = data;
document.head.appendChild(scriptObj);
if(next.length > 0) loadTemplates.apply(this, next);
});
}
}
function loadScripts() {
var script = arguments[0],
scriptObj = document.createElement('script'),
next = Array.prototype.slice.call(arguments,1);
scriptObj.type = 'text/javascript';
scriptObj.src = script;
scriptObj.onload = scriptObj.onreadystatechange = (next.length > 0) ? function(){loadScripts.apply(this, next)} : function(){$(document).ready(function() {initializeApp()})};
document.head.appendChild(scriptObj);
}
function loadApp(obj){
loadTemplates.apply(this, obj.templates.concat(function(){loadScripts.apply(this,obj.scripts)}))
}
window.onload = function(){
loadApp({
templates:
[
'/javascripts/views/templates/nav-bar.handlebars',
],
scripts:
[
'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGoogleMaps',
'/javascripts/lib/bootstrap.js',
'/javascripts/lib/rails.js',
'/javascripts/lib/ember.js',
'/javascripts/application.js',
'/javascripts/views/nav_bar.js',
]
})
}
编辑：我清理它，并使它正常工作，仅适用于Chrome测试虽然
Thanx！你让我今天一整天都感觉很好！ :-) – 2012-07-12 11:43:37
这是可能的，是的，你可以不用使用另一个另一个工具，就是我们ing ember.js和其他东西。我是这样做的：
1）html代码。注意所有的handlebars文件都需要在使用它们之前加载。这里只有一个名为handlebars的文件。JS
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/ember-0.9.8.1.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/app.js"></script>
</body>
2）这个文件handlebars.js包含以下，使用烬
var src = "Hello, <b>{{name}}</b>";
Em.TEMPLATES["say-hello"] = Em.Handlebars.compile(src);
3的编译器），然后你的app.js文件中，只需要使用它，因为它是可利用的（它是）：
var hu = Em.View.create({
templateName: "say-hello",
name: "Allô",
mouseDown: function() {
window.alert("hello world!");
}
});
hu.appendTo("body");
如果您加载模板到加载灰烬之前，DOM，那么你不需要编译或注册您的模板。灰烬会随之而来，为你做。
这里是一篇文章显示如何：
http://weboriented.wordpress.com/2012/09/02/loading-handlebars-templates-in-ember-using-curl-js/
也可以修补灰烬查看加载上获得
Em.View.reopen({
templateForName: function(name, type) {
if (!name) { return; }
var templates = Em.get(this, 'templates'),
template = Em.get(templates, name);
if (!template) {
$.ajax({
url: 'templates/%@.hbs'.fmt(name),
async: false
}).success(function(data) {
template = Ember.Handlebars.compile(data);
});
}
if (!template) {
throw new Em.Error('%@ - Unable to find %@ "%@".'.fmt(this, type, name));
}
return template;
}
});
更新模板：由于灰烬1.0.0 pre.3这解决方案probabaly没有更多的工作（也许可以迁移到最近的Ember）
有谁知道如何用最近的Ember.js做到这一点？ – Alp 2014-01-16 15:39:23
请注意，同步请求现在已被视为已过时：http://xhr.spec.whatwg.org/#sync-warning – 2014-09-02 15:59:00
这里的另一个解决方案，在您的Ember视图/组件：
var viewClass = Ember.View.extend({ templateName: this.get('contentTemplate') });
var view = this.createChildView(viewClass);
var html = view.renderToBuffer().buffer;
这是一个老问题，所以所有的答案都有点过时。随着Ember CLI模板被命名约定自动加载为require.js模块。这有点奇怪，因为你编写了ES6的建议语法，并且构建将它转换为require.js语法，但它工作得很好。
啊是的！这是我寻找的那种东西 – timanema 2012-04-23 23:44:48
Ember CLI是另一个不错的选择。 – 2014-08-06 03:05:01
最新版本的Ember（写作时v1.8）到{{view.personName}}的语法稍有变化。结帐我的jsbin： http://emberjs.jsbin.com/soqore/2/edit – Paul 2014-11-05 01:50:18