Question

我试图将一些Knockout内容放入Bootstrap Carousel中。

我需要在评论中获取代码＆＃39;这是我遇到问题的代码＆＃39; （通过下面的小提琴链接）重复以匹配＆＃39; pageCount＆＃39;中的页数但它不会，我假设因为幻灯片内容中的数据绑定。我无法解决我需要做的事情或添加到视图模型中。页数会有所不同，因此我无法制作静态幻灯片。

没有绑定的纯文本上下文重复以匹配＆＃39; pageCount＆＃39;中包含的数字。根据需要。

很抱歉，我无法在此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'。感谢管理员的时间和批准我的问题（我知道代码示例可能不完美，但我最初没有写）。

具有Knockout绑定的Bootstrap Carousel - 无法使嵌套绑定起作用

1 个答案: