很简单,我不想在我的html文件中定义所有的车把模板
我试过这个
<script type="text/x-handlebars" data-template-name="nav-bar" src="template.handlebar"></script>
但是这没用。我不能以编程方式定义模板我的模板,甚至只是加载车把文件以便我可以重复使用,而且我觉得它可以使事情更易于维护。
我尝试用ajax加载它们并将它们附加到头部,这样可以正常工作我可以在那里看到但是ember.js在加载ember并且未定义模板后不会读取它。
答案 0 :(得分:9)
或者在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();
我建议使用像 Richard Millan 这样的工具。另请查看interline/ember-skeleton,它支持编译模板。
答案 1 :(得分:9)
您还可以修补Ember View以在get
上加载模板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;
}
});
更新:自Ember 1.0.0-pre.3以来,这个解决方案可能没有更多工作(也许可以迁移到最近的Ember)
答案 2 :(得分:5)
因为我仍然希望我的模板有单独的文件,我不想在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',
]
})
}
编辑:我清理了它并使其正常工作,但只测试了镀铬
答案 3 :(得分:1)
这是可能的,但您需要先预先编译模板。这也允许您将所有模板包含在一个文件中。
稍后,您需要包含javascript文件。
<script src="path/to/compiled/templates.js" type="text/javascript"></script>
答案 4 :(得分:1)
如果在加载Ember之前将模板加载到DOM中,则无需编译或注册模板。 Ember会在你之后出现并为你做。
这是一篇展示如何:
的文章http://weboriented.wordpress.com/2012/09/02/loading-handlebars-templates-in-ember-using-curl-js/
答案 5 :(得分:0)
这是Ember视图/组件中的另一个解决方案:
var viewClass = Ember.View.extend({ templateName: this.get('contentTemplate') });
var view = this.createChildView(viewClass);
var html = view.renderToBuffer().buffer;
答案 6 :(得分:0)
这是一个老问题,因此所有答案都有点过时了。使用Ember CLI模板通过命名约定作为require.js模块自动加载。这有点奇怪,因为您编写了提议的ES6导入语法,并且构建将其转换为require.js语法,但它的效果非常好。
答案 7 :(得分:-1)
这是可能的,是的,你可以不使用另一个另一个工具,只使用ember.js而不是别的。我是这样做的:
1)html代码。请注意,在使用任何手柄文件之前,需要加载所有手柄文件。这里,它只有一个名为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包含以下内容,使用ember的编译器
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");