带有 Knockout 绑定的 Bootstrap Carousel - 无法使嵌套绑定工作

Question

我正在尝试将一些 Knockout 内容放入 Bootstrap Carousel。

我需要在 cmets 中获取代码“这是我遇到问题的代码”（通过下面的小提琴链接）以重复匹配“pageCount”中的页数，但它不会，我m 假设是因为幻灯片内容中的数据绑定。我无法弄清楚我需要做什么或在视图模型中添加。页数会有所不同，所以我无法制作静态幻灯片。

没有绑定的纯文本上下文根据需要重复匹配“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'。感谢管理员抽出时间并批准我的问题（我知道代码示例可能并不完美，但我最初并没有编写它）。