twitter-bootstrap - 带有 Knockout 绑定(bind)的 Bootstrap Carousel - 无法使嵌套绑定(bind)工作

Question

我正在尝试将一些 Knockout 内容放入 Bootstrap 轮播中。

我需要在评论“这是我遇到问题的代码”(通过下面的 fiddle 链接)中获取代码以重复匹配“pageCount”中的页数，但它不会，我我假设是因为幻灯片内容中的数据绑定(bind)。我不知道我需要做什么或在 View 模型中添加什么。页数会有所不同，所以我无法制作静态幻灯片。

没有绑定(bind)的纯文本上下文会根据需要重复匹配“pageCount”中包含的数字。

抱歉，我无法在此 fiddle 中显示数据库内容.

HTML

<div class="container">
    <div class="feature-bg-image" id="content">
        <script>
            $('.carousel').carousel({

            })
        </script>
        <p> I need to get the code within the comments 'this is the code I'm having troublw with' below to repeat to match the number of pages in 'pageCount' but it will not because of the data bindings. I can't work out what I need to do or add in the view model. </p>
        <p>Plain text context with no bindings repeats to match the number containe in 'pageCount' as desired </p>
        <div class="row">
            <div id="carousel-home" class="carousel slide" data-interval="false" data-wrap="false">
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <!-- this is the code I'm having troublw with -->
                    <!-- ko foreach: new Array(pageCount()) -->
                    <div class="item active">
                        <div class="feature-item-container" data-bind="foreach: features">
                            <span
                                data-bind="badge: badgeUrl, popover: { trigger: 'hover',  html: true, placement: 'left auto' }">
                                <a data-placement='left' data-bind="attr: { href: target }">
                                    <img class="feature-item" name="feature_item"
                                         data-bind="attr: { src: icon, alt: name }">
                                </a>
                            </span>
                        </div>
                    </div>
                    <!-- /ko -->
                    <!-- end this is the code I'm having troublw with -->

                    <!-- ko foreach: new Array(pageCount()) -->
                    <div class="item">
                        <P>
                            This item repeats to match the number of pages in 'pageCount'
                            but the content above doesn't. I can't work out why after googling all week and looking through SO questions.
                        </p>
                    </div>
                    <!-- /ko -->
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-home" data-slide="prev" rel="nofollow">
                    <span data-bind="click: previousPage, style: { color: page() > 1 ? '#222' : '#999' }">
                        <</span>
                </a>
                <a class="right carousel-control" href="#carousel-home" data-slide="next" rel="nofollow">
                    <span data-bind="click: nextPage, style: { color: page()"
                    < pageCount() ? '#222' : '#999' }">></span>
                </a>
            </div>
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <!-- ko foreach: new Array(pageCount()) -->
                <li data-target="#carousel-home" data-bind='attr: { "data-slide-to": $index() }'></li>
                <!-- /ko -->
            </ol>
        </div>
    </div>
</div>

JavaScript

function FeaturesViewModel() {

        var self = this;

        self.limit = 2;
        self.page = ko.observable(1);
        self.pageCount = ko.observable(1);  
        self.features = ko.observableArray();

        self.refresh = function() { 
            $.get('/api/features?page=' + self.page() + '&limit=' + self.limit, function(data) {
                self.features(data.features);
                self.pageCount(data.pageCount);
            });
        };

        self.previousPage = function() {
            self.page( self.page() - 1 );
            if( self.page() < 1 ) self.page( 1 );
            self.refresh();
        };

        self.nextPage = function() {
            self.page( self.page() + 1 );
            if( self.page() > self.pageCount() ) self.page( self.pageCount() );
            self.refresh();
        };      
    }

    $(function() {

        var featuresModel = new FeaturesViewModel();    
        ko.applyBindings(featuresModel);
        featuresModel.refresh();

    });

Answer 1

我查看了 Google Groups Knockout 论坛并找到了解决问题的线索。我将 '$parent' 添加到 'foreach: features' 例如'foreach:$parent.features'。感谢管理员抽出时间来批准我的问题(我知道代码示例可能并不完美，但最初并不是我写的)。