0
我是ember.js的新手。我設法使用Grunt文件預編譯模板。但是，當我將它們包含在index.html中時，我看到一個空白頁面，模板未呈現。我究竟做錯了什麼？如果我不編譯模板並直接包含在index.html中，它就可以工作。Ember.js：如何在index.html中正確包含編譯模板？
我使用yeoman.io（使用涼亭包咕嚕-燼模板，燼，webapp的腳手架）安裝了一切
我的index.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My New App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="scripts/templates.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
我App.js：
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
模板：
編輯：application.hbs
<h2>Welcome to Ember.js</h2>
{{outlet}}
編輯：index.hbs
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
編譯模板templates.js：
define(["ember"], function(Ember){
Ember.TEMPLATES["application"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
var buffer = '', stack1;
data.buffer.push("<h2>Welcome to Ember.js</h2>\n\n");
stack1 = helpers._triageMustache.call(depth0, "outlet", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
return buffer;
});
Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Ember.Handlebars.helpers); data = data || {};
var buffer = '', stack1, self=this;
function program1(depth0,data) {
var buffer = '', stack1;
data.buffer.push("\n <li>");
stack1 = helpers._triageMustache.call(depth0, "item", {hash:{},hashTypes:{},hashContexts:{},contexts:[depth0],types:["ID"],data:data});
if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
data.buffer.push("</li>\n ");
return buffer;
}
data.buffer.push("\n<ul>\n ");
stack1 = helpers.each.call(depth0, "item", "in", "model", {hash:{},hashTypes:{},hashContexts:{},inverse:self.noop,fn:self.program(1, program1, data),contexts:[depth0,depth0,depth0],types:["ID","ID","ID"],data:data});
if(stack1 || stack1 === 0) { data.buffer.push(stack1); }
data.buffer.push("\n</ul>\n");
return buffer;
});
});
是的，他們都來自一個index.hbs文件，腳本標記沒有被省略。我相信你的意思是文件名被用作模板名稱？所以我從模板中刪除了
我通過從grunt-ember-templates grunt配置中刪除amd：true選項來解決問題。說實話，我已經添加它不知道它是什麼。
爲了完整性，這裏是我目前的grunt文件。這個文件由yeoman.io webapp生成器自動生成，並且我只爲它添加了一個grunt-ember-templates配置（在emberTemplates下定義的配置）。
從今天起，我在網上找到的所有指南都是不完整的或過時的，這對我很有用。
來源
2014-03-29 18:00:06 user627119