为什么这个模板现在出现了?

时间:2016-01-21 21:54:31

标签: javascript templates meteor iron-router

我在Meteor.js应用上显示模板时遇到问题。这是 website_list 。由于某些原因它没有显示,也许你可以帮助我?

我正在尝试从MongoDB网站集中显示网站列表。

HTML代码:

<!-- master layout template -->
<template name="ApplicationLayout">
    {{> yield "navbar"}}
    {{> yield "main"}}
</template>
<!-- / master layout template -->

<!-- WELCOME -->
<template name="welcome">
    <div class="container"> 
        <div class="jumbotron">
            <h1>Welcome to Site Ace, {{username}}!</h1>
            <a href="/websites" class="btn btn-info">Enter</a>
        </div>
    </div>
</template>
<!-- / WELCOME-->

    <!-- NAVBAR  - you will be putting the login functions here -->
    <template name="navbar">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    Site Ace
                </a>
            </div>
            <ul class="nav navbar-nav login">
                <li>
                    {{> loginButtons}}
                </li>
            </ul>
        </div>
    </nav>
</template>

<template name="websites">
    <div class="container">
        {{> website_form}}
        {{> website_list}}
    </div>
</template>
<!-- / NAVBAR -->


<!-- WEBSITE FORM -->
<template name="website_form">
    {{#if currentUser}}
    <a class="btn btn-default js-toggle-website-form" href="#">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add a Website
    </a>
    {{/if}}
    <div id="website_form" class="hidden_div">
        <form class="js-save-website-form">
          <div class="form-group">
            <label for="url">Site address</label>
            <input type="text" class="form-control" id="url" placeholder="http://blablabla.org">
          </div>
          <div class="form-group">
            <label for="title">Title</label>
            <input type="text" class="form-control" id="title" placeholder="Mysite">
          </div>
            <div class="form-group">
            <label for="description">Description</label>
            <input type="text" class="form-control" id="description" placeholder="I found this site really useful for ...">
          </div>
            <button type="submit" class="btn btn-default js-">Submit</button>
        </form>
    </div>
</template>
<!-- / WEBSITE FORM -->

<!-- WEBSITE LIST -->
<template name="website_list">
    <ol>
    {{#each websites}}
        {{>website_item}}
    {{/each}}
    </ol>
</template>
<!-- / WEBSITE LIST -->

<!-- WEBSITE ITEM -->
<template name="website_item">
    <li>
        <a href="{{url}}">{{title}}</a>
        <p>
            {{description}}
        </p>
        <p>
            <a href="/details/{{_id}}" class="btn btn-info">
                Details
            </a>
            <a href="#" class="btn btn-success js-upvote">
                <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
            </a>
            <a href="#" class="btn btn-danger js-downvote">
                <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
            </a>
        </p>
        <!-- you will be putting your up and down vote buttons in here! -->
    </li>
</template>
<!-- / WEBSITE ITEM -->

JS代码:

// SECURITY

Websites = new Mongo.Collection("websites");

// set up security on Websites collection
Websites.allow({

    // we need to be able to update websites for ratings.
    update:function(userId, doc){
        console.log("Testing security on website update");
        if (Meteor.user()){// they are logged in
            return true;
        } else {// user not logged in - do not let them update (rate) the website
            return false;
        }
    },
    insert:function(userId, doc){
        console.log("Testing security on website insert");
        if (Meteor.user()){ // they are logged in
            if (userId != doc.createdBy){ // the user is messing around
                return false;
            }
            else{ // the user is logged in, the website has the correct user id
                return true;
            }
        }
        else{ // user not logged in
            return false;
        }
    },
    remove:function(userId, doc){
        return true;
    }
})

// / SECURITY

if (Meteor.isClient) {

    /////
    // ROUTERS
    /////

    // GLOBAL LAYOUT
    Router.configure({
        layoutTemplate: 'ApplicationLayout'
    });

    // ROUTES
    Router.route('/', function() {
        this.render('welcome', { // welcome is the template to render
            to:"main" // main is the template to render welcome INTO
        });
    });

    Router.route('/websites', function() {
        this.render('navbar', {
            to:"navbar"
        });
        this.render('websites', {
            to:"main"
        });
    });

    Router.route('/websites/:_id', function () {
        this.render('navbar', {
            to:"navbar"
        });
        this.render('image', {
            to:"main", 
        data:function(){
            return Websites.findOne({_id:this.params._id});
        }
        });
    });
/////
// STARTUP (Creating Websites)
/////

if (Meteor.isServer) {
    // start up function that creates entries in the Websites databases.
  Meteor.startup(function () {
    // code to run on server at startup
    if (!Websites.findOne()){
        console.log("No websites yet. Creating starter data.");
        Websites.insert({
            title:"Goldsmiths Computing Department", 
            url:"http://www.gold.ac.uk/computing/", 
            description:"This is where this course was developed.", 
            createdOn:new Date()
        });
        Websites.insert({
            title:"University of London", 
            url:"http://www.londoninternational.ac.uk/courses/undergraduate/goldsmiths/bsc-creative-computing-bsc-diploma-work-entry-route", 
            description:"University of London International Programme.", 
            createdOn:new Date()
        });
        Websites.insert({
            title:"Coursera", 
            url:"http://www.coursera.org", 
            description:"Universal access to the world’s best education.", 
            createdOn:new Date()
        });
        Websites.insert({
            title:"Google", 
            url:"http://www.google.com", 
            description:"Popular search engine.", 
            createdOn:new Date()
        });
    }
  });
}

1 个答案:

答案 0 :(得分:0)

您忘记为website_list模板实施帮助函数,该模板会返回Websites集合的文档。

例如:

Template.website_list.helpers({
  websites: function() {
    return Websites.find();
  }
});

这是MeteorPad