Avatar billede booyaka Nybegynder
05. december 2015 - 22:22 Der er 4 kommentarer

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;
}
Avatar billede booyaka Nybegynder
05. december 2015 - 22:26 #1
Helt specifikt skulle siden "lave" en historie hver gang man trykker publish efter noget tekst, men der sker intet når jeg trykker.
Avatar billede keysersoze Guru
06. december 2015 - 11:14 #2
hvor inkluderer du dit js og css?
Avatar billede booyaka Nybegynder
06. december 2015 - 18:47 #3
Ja, jeg har studset over det samme, det er kodet ind i html'en, men når man launcher det i meteor læser den css sheetet. Men ikke js.
Avatar billede keysersoze Guru
06. december 2015 - 23:21 #4
har du evt et link?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester