javascript - Meteor - 使用无法正确显示的模板添加图像 slider

Question

我正在使用 Meteor w/Twitter bootstrap + IronRouter 看起来像

Router.configure({
    layoutTemplate: 'layout'
});
Router.map( function (){
    this.route('home', {path: '/'});
    this.route('test', {path: '/test'});
}

布局模板 (layout.html) 如下所示:

<template name="layout">
    {{>navigation}}
  <div class="container">
    {{>yield}}
  </div>
</template>

导航模板有导航栏和下拉菜单，因此在每个页面上都有体现。

我想将图像 slider 添加到我从 Code Lab Carousel 获得示例代码的测试页

我的/client/test/目录有 3 个文件:test.html、test.js、test.css

test.css 看起来像:

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
    margin: 20px;
}

test.html 看起来像:

<template name="test">
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">    </script>
<div class="page-header">
    <h1>Test</h1>
</div>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="4000" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>   
   <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <h2>Slide 1</h2>
            <div class="carousel-caption">
              <h3>First slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="item">
            <h2>Slide 2</h2>
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
            </div>
        </div>
        <div class="item">
            <h2>Slide 3</h2>
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>

这不会显示代码实验室中所示的 slider 。它显示圆圈而不是箭头。其次，显示我们在哪张图片上的三个圆圈也在右手边 Angular 。

所以我的问题是:

1) 我该如何解决这个圈子问题？2) 完全理解模板的最佳指南是什么，因为我不清楚它的结构。

例如，模板可以放在标签里面？但是 {{>yield}} 是否只包含模板或 body 标签内的所有内容？

Answer 1

问题是没有正确加载字形。我通过删除 bootstap 解决了这个问题

meteor remove bootstrap

然后添加bootstrap-3

meteor add mizzao:bootstrap-3