EmberJS 应用程序中的把手不显示任何内容答案

【问题标题】：Handlebars in EmberJS app not displaying anythingEmberJS 应用程序中的把手不显示任何内容
【发布时间】：2015-07-23 16:37:48
【问题描述】：

我是 Ember 的新手，正在尝试为我的 Web 应用程序设置导航栏。我做了所有的样式，不只是我想要的方式，当只用 HTML 编码时它工作正常，但是当我尝试将它转换为 Handlebars 并打开 index.html 时，我得到一个空白屏幕。知道是什么原因造成的吗？

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Casteva</title>
    <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">    
<link rel="stylesheet" href="styles/app.css">
<link rel="stylesheet" href="styles/foundation.css">
<script src="router.js"></script> 
<script src="app.js"></script>

<script type='text/x-handlebars' data-template-name='application'>
  <div class='container'>
    <ul class="navbar">
      {{#link-to "upload" tagName="li" class="icon-upload"}}Upload{{/link-to}}
      {{#link-to "explore" tagName="li" class="icon-explore"}}Explore{{/link-to}}
      {{#link-to "messages" tagName="li" class="icon-messages"}}Messages{{/link-to}}
      {{#link-to "notifications" tagName="li" class="icon-notifications"}}Notifications{{/link-to}}
      {{#link-to "search" tagName="li" class="icon-search"}}Search{{/link-to}}
      {{#link-to "profile" tagName="li" class="icon-profile"}}Profile{{/link-to}}
    </ul>
  </div>
</script>
<script src="assets/vendor.js"></script>
<script src="assets/casteva.js"></script>

这是一些 CSS：

@font-face {
font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.svg#icomoon') format('svg'),
  url('../fonts/icomoon.woff') format('woff'),
  url('/..fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.navbar {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
}

.navbar li a {
  display: block;
  text-indent: -500em;
  height: 5em;
  width: 5em;
  line-height: 5em;
  text-align: center;
  color: #999;
  position: relative;
  -webkit-transition: background 0.1s ease-in-out;
  -moz-transition: background 0.1s ease-in-out;
  transition: background 0.1s ease-in-out;
}

这是 Router.js 文件

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
    this.route('upload')
    this.route('explore')
    this.route('notifications')
    this.route('messages')
    this.route('search')
    this.route('profile')
});

export default Router;

【问题讨论】：

标签： javascript html css ember.js handlebars.js

【解决方案1】：

你需要运行

ember server

在终端中。
您将在地址栏中的 localhost:4200 访问您的应用程序。不要直接加载 index.html - 它必须由服务器提供服务，ember cli 在开发中为您提供。

【讨论】：