如果这是一个简单的错误或者我没有意识到一些非常明显的事情,我提前道歉。我已经在 StackOverflow 上查看了其他用户的问题,但仍然无法让我的问题正常工作。我究竟做错了什么?我正在网上学习教程,我的代码看起来与我的讲师相同。
我的问题是,我可以通过在浏览器中输入我的路线到 URL 中,让 Ember 渲染“关于”、“关于/团队”、“联系人”的模板,但是一旦我将 Handlebars 模板添加到我的应用程序(我计划然后使用无序列表导航到这些路由/模板)它不会呈现我的应用程序模板。
这是我的代码。
<html>
<head>
<title>Let's Learn Ember.js</title>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.0.0.js"></script>
<script src="js/libs/ember.js"></script>
<script>
window.App = Ember.Application.create();
App.Router.map(function(){
this.resource("about", function(){
this.route("team")
});
this.route("contact");
});
</script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<nav>
<ul>
<li>{{#linkTo "index"}}Home{{/linkTo}}</li>
<li>{{#linkTo "about"}}About{{/linkTo}}</li>
<ul>
<li>{{#linkTo "about.team"}Team{{/linkTo}}</li>
</ul>
</li>
<li>{{#linkTo "contact"}Contact{{/linkTo}}</li>
</ul>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1>Welcome to Ember.js </h1>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h1>About Page</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="about/team">
<h2>here is our team!</h2>
</script>
<script type="text/x-handlebars" data-template-name="contact">
<h1>Please contact us!</h1>
</script>
</body>
</html>
编辑 事实证明,这是因为我没有用“团队”和“联系人”的链接结束 Handlebars 上的双大括号。
抱歉问了个愚蠢的问题。
最佳答案
您在链接上缺少一些右括号。这是修复后的内容
<li>{{#linkTo "about.team"}}Team{{/linkTo}}</li>
</ul>
</li>
<li>{{#linkTo "contact"}}Contact{{/linkTo}}</li>
很容易错过!强烈建议将控制台保持在浏览器中,它会捕获解析错误。
关于javascript - Ember.js 新手,我可以渲染除根应用程序模板之外的所有模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25982563/