Loade javascript i Meteor
Hej.Jeg sidder med et online kursus i Meteor og jeg har været gennem alle de forskellige dele af det. Jeg har prøvet at gå koden efter, i forhold til det der bliver vist og jeg kan umiddelbart ikke finde fejlen. Men jeg kan ikke få siden til at loade javascriptet når jeg prøver det af i localhost:3000.
Jeg er temmelig grøn på det her område, bare for at sige det. Så det kan sagtens være jeg har overset noget grundlæggende, men jeg synes jeg har fulgt underviseren temmelig nøje.
Jeg bruger commanden meteor når jeg launcher localhost i terminal på mac.
Håber nogen kan hjælpe mig med at gennemskue det.
/b
----
Javascript
Stories = new Mongo.Collection("stories");
if (Meteor.isClient) {
Template.registerHelper('userAvatar', function() {
return Meteor.user().services.twitter.profile_image_url;
});
Template.body.helpers({
Stories: function () {
return Stories.find({}, {
sort: {
createdAt: -1
}
});
}
});
Template.body.events({
"submit .new-story": function(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from the form elements
var text = event.target.text.value;
var title = event.target.text.title.value;
// Make sure the user is logged in before inserting a task
if (!Meteor.userId()) {
throw new Meteor.Error("Not Authorized");
}
// Insert a task into the Collection
Stories.inserting({
text: text,
title: title,
createdAt: new Date(), // current time
owner: Meteor.userId(), // id of logged in user
username: Meteor.user().username,
authorAvatar: Meteor.user().services.twitter.profile_image_url,
authorName: Meteor.user().services.twitter.screenName,
});
// Clear form
event.target.text.value = "";
event.target.title.value ="";
}
});
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
----
HTML
<head>
<title>projectA</title>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<a class="navbar-brand" href="#">
<img class="logo" src="https://github.com/Medium/medium-logos/blob/master/logo/medium-m-color-100px.png?raw=true">
</a>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-secondary">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Top Stories</a></li>
<li><a href="#contact">Bookmarks</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<button type="submit" class="button">Write a story</button>
</li>
{{#if currentUser}}
<li><a href="#"> {{>userAvatar}}</a></li>
{{/if}}
<li class="login">{{> loginButtons}}</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container section">
{{#if currentUser}}
<div class="row">
<div class="col-md-1">
{{>userAvatar}}
</div>
<form class="new-story">
<div class="col-md-11">
<textarea class="story-title" cols="60" rows="1" name="title" placeholder="Title"></textarea>
<textarea cols ="60" rows="3" name="story-text" placeholder="Tell your story..."></textarea>
</div>
<button type="submit" class="button button-green"> Publish</button>
</form>
</div>
{{/if}}
<div class="heading-title"> Top Stories for you </div>
{{#each stories}}
{{>story}}
{{/each}}
</div>
</body>
<template name="userAvatar">
<img src="{{userAvatar}}" class="avatar-image">
</template>
<template name="story">
<br/>
<img src="{{authorAvatar}}" class="avatar-image">
<div class="story-author">{{authorName}}</div>
<div class="story-createdat">{{createdAt}}</div>
<div class="story-title"> {{title}}</div>
<div class="story-text">{{text}}</div>
</template>
---
CSS
/* CSS declarations go here */
.navbar-default {
background: white;
background-image: none;
height:70px;
}
.navbar-secondary {
padding-top:10px;
}
.navbar-secondary li{
text-transform: uppercase;
font-size: 13px;
font-weight: 400;
background-image: none;
background-color: white;
}
.logo {
max-width: 50px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
border-bottom: 2px solid black;
color: black;
background-image: none;
background-color: white;
-webkit-box-shadow: none;
box-shadow: none;
}
.button {
margin-top: 15px;
position: relative;
height: 37px;
padding: 0px 16px;
font-size: 14px;
text-align: center;
text-decoration: none;
color: black;
background: white;
border: 2px solid black;
font-weight: 400;
border-radius: 999em;
}
.login {
margin: 25px 100px 0px 30px;
}
.avatar-image {
border-radius: 25px;
}
.section {
margin-top: 100px;
}
.button-green {
border-color: #02b875;
color: #00ab6b;
}
textarea {
outline: none !important;
resize:none;
border: 0px;
font-size: 20px;
font-weight: 300;
}
.story-title {
font-size: 32px;
font-weight: bold;
max-width: 700px;
}
.story-text {
letter-spacing: .01rem;
font-weight: 200;
font-size: 18px;
line-height: 1.5;
padding-bottom: 40px;
border-bottom: 1px solid #efefef;
max-width: 600px;
margin-top: 10px;
}
.heading-title {
margin: 50px 0px 0px 0px;
padding: 15px 0px;
letter-spacing: 0;
font-weight: 300;
font-size: 18px;
font-style: normal;
font-size: 18px;
text-transform: none;
color: rgba(0,0,0,0,9);
border-bottom: 1px solid #efefef;
}
.story-author {
position: relative;
top: -40px;
left: 60px;
color: #00ab6b;
text-decoration: none;
}
.story-createdat {
position: relative;
top: -40px;
left: 60px;
color: grey;
}
