Question

我有点新鲜的余烬。我的应用程序基本上按照我想要的方式设置，但现在我需要在页面中添加轮播。我将以下示例（取自bootstrap的示例）添加到我的模板中：

<div id="myCarousel" class="carousel slide">
    <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">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<div id="saveCancelBar" class="saveCancelBar"></div>

当我点击下一个或上一个按钮时，我的日志中出现以下错误：

Uncaught Error: No route matched the URL 'myCarousel' ember-1.0.0-rc.2.js:22641
Router.handleURL ember-1.0.0-rc.2.js:22641
Ember.Router.Ember.Object.extend.handleURL ember-1.0.0-rc.2.js:23409
(anonymous function) ember-1.0.0-rc.2.js:23385
(anonymous function) ember-1.0.0-rc.2.js:25142
(anonymous function) ember-1.0.0-rc.2.js:4360
Ember.handleErrors ember-1.0.0-rc.2.js:411
invoke ember-1.0.0-rc.2.js:4358
tryable ember-1.0.0-rc.2.js:4547
Ember.tryFinally ember-1.0.0-rc.2.js:1102
Ember.run ember-1.0.0-rc.2.js:4551
(anonymous function) ember-1.0.0-rc.2.js:25136
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle

我需要做些什么特别的事情来告诉灰烬这个有用吗？

Answer 1

它看起来像是“myCarousel”模板的缺失路径。

<强>更新

TEMPLATES

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="myCarousel">
    myCarousel
    <div id="myCarousel" class="carousel slide">
    <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">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<div id="saveCancelBar" class="saveCancelBar"></div>
</script>

JS

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
    redirect: function(){
        this.transitionTo('myCarousel')
    }
});

App.Router.map( function() {
    this.resource('myCarousel');
});

JSFiddle：http://jsfiddle.net/theremin/C3U5R/

在Ember应用程序中的Bootstrap轮播

1 个答案: