Question

我想在Knockout.js中创建一个轮播组件我从jsfiddle.net分叉了一个淘汰赛轮播示例。以下是它的源代码：

HTML：

<!-- start main slider carousel -->
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                <!-- main slider carousel items -->
                <!-- ko foreach:imagePaths -->
                <div class="carousel-inner">
                    <div data-bind='attr:{"data-slide-number": $index, "class": "item" }, css: {"active": $index() == 0}'>
                        <img data-bind='attr:{src: link, height: 200, width: 132, "class": "img-responsive", alt: alt }' />
                    </div>
                </div>
                <!-- /ko -->
                <!-- main slider carousel nav controls -->
                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
<!-- end main slider carousel-->
<!-- start thumb navigation carousel -->
<div class="col-md-6 offset-top_1" id="slider-thumbs">

    <!-- thumb navigation carousel items -->
    <ol class="list-inline">
        <!-- ko foreach:imagePaths -->
        <li data-bind="attr: { 'data-slide-to': $index }">
            <a data-bind='attr:{"id": "carousel-selector-"+ $index() }'>
                <img data-bind="attr:{src: link, height: 20, width: 12, alt: alt }" />
            </a>
        </li>
        <!-- /ko -->
    </ol>

</div>
<!-- end thumb navigation carousel -->

的javascript：

    var Image = function (data) {
    var self = this;
    self.alt = data.alt;
    self.link = data.link;
    self.title = data.title;
    self.active = data.active;
};

var CarouselViewModel = function (params) {

    var self = this;

    self.selectedImageIndex = ko.observable(params && params.selectedImageIndex || 0);
    self.imagePaths = ko.observableArray(params && params.imagePaths || []);
    self.addImage = function(img) {
        self.imagePaths.push(img);
    };

}

var viewModel = new CarouselViewModel({selectedImageIndex: 0, imagePaths: [] });
ko.applyBindings(viewModel);
viewModel.addImage({
alt: 'yellowstone-77', 
link: 'https://pshabalin.files.wordpress.com/2013/01/yellowstone-77.png', 
title: 'yellowstone-77'});

    viewModel.addImage({
    alt: 'yellowstone-77', 
    link: 'https://pshabalin.files.wordpress.com/2013/01/yellowstone-58.png', 
    title: 'yellowstone-58'});

    viewModel.addImage({
    alt: 'yellowstone-77', 
    link: 'https://pshabalin.files.wordpress.com/2013/01/img_1082.png', 
    title: 'img_1082.png'});

    viewModel.addImage(
    {alt: 'yellowstone-77', 
    link: 'https://pshabalin.files.wordpress.com/2013/01/dscn2295.png', 
    title: 'dscn2295'});

jsfiddle.net reference

但我无法让它正常工作。任何人都可以帮我解决这个问题。

Answer 1

您的第一个位置错误。它应该在<div class="carousel-inner">内，不包含它。

检查以下固定jsfiddle工作的轮播：https://jsfiddle.net/elbecita/0L9vb3m4/58/

Answer 2

@elbecita的回答是正确的。我把它拉了一下。

- (void) test {
    NSData *a1 = [[NSData alloc] init];
    NSLog(@"NSData: %lu", [a1 retainCount]);

    NSMutableData *a2 = [[NSMutableData alloc] init];
    NSLog(@"NSMutableData: %lu", [a2 retainCount]);

    NSObject *a3 = [[NSObject alloc] init];
    NSLog(@"NSObject: %lu", [a3 retainCount]);

    NSString *b1 = [[NSString alloc] initWithFormat: @"%@", @"ok"];
    NSLog(@"NSString: %lu", [b1 retainCount]);


    NSString *b2 = [[NSString alloc] initWithFormat: @"%@", a3];
    NSLog(@"NSStinrg: %lu", [b2 retainCount]);


    NSString *a = @"abc";
    NSString *b = @"abc";
    NSLog(@"%p", a);
    NSLog(@"%p", b);

}

这是小提琴：

bootstrap carousel in jsfiddle

我希望这可以帮助任何人。

KO Carousel示例不起作用

2 个答案: