I am kind of new to Ember and am trying to set up a nav bar for my web application. I did all the styling and what not just the way I want it, and it works fine when coded with just HTML, but when I try to convert that over to Handlebars and open index.html, I get a blank screen. Any idea what could be causing this?
<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>
Here is some of the 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;
}
And here is the Router.js file
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;
Aucun commentaire:
Enregistrer un commentaire