Question

我是Ember的新手，我正在尝试为我的网络应用程序设置一个导航栏。我做了所有的样式，不仅仅是我想要它的方式，并且只用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;

Answer 1

你需要运行

ember server

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

EmberJS app中的把手没有显示任何内容

1 个答案: