如何使用Knockoutjs + Bootstrap Carousel获取当前项目索引

时间:2015-03-10 16:23:33

标签: jquery css twitter-bootstrap knockout.js

我有一个我尝试使用Bootstrap Carousel和KnockoutJS显示的任务列表。用户可以使用控件(箭头)查看所有可用任务。在上面我想显示当前可见任务的索引(li)。

<ul id="slidercontent" class="carousel-indicators" data-bind="foreach: Tasks">
<li data-target="#taskCarousel" data-bind="attr: { 'data-slide-to': $index }"></li></ul>

我的控件在div之外,但效果很好。

<div class="tasks-carousel-controls">
                <!-- ko if: $root.Tasks().length > 1 -->
                <a class="left icon-chevron-left" href="#taskCarousel" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
                <a class="right icon-chevron-right" href="#taskCarousel" data-slide="next">
                    <span class="icon-next"></span>
                </a>
                <!-- /ko -->
            </div>

然后我有另一个div,我说哪个是任务的索引,比如Y&#39;中的X,其中X是我当前的索引,Y是我的可观察数组的长度。< / p>

我认为最好的解决方案是绑定一些observable,其值是class =&#39; active&#39;但我没有成功:/

1 个答案:

答案 0 :(得分:-1)

你尝试过这样的事吗?

$('body').on('click', '.tasks-carousel-controls a', function() {
     var slideIdx = $('#taskCarousel').find('.active').index();
     $('#divId').html('Slide '+slideIdx+' out of 5');
});

其中taskCarousel是你的bootstrap轮播的id,divId是你想要显示索引的div的id。