Knockout computed observable with access to observableArray

Question

I'm having an issue using a computedObservable. They seem pretty straight forward, but I think my use case might be a little odd. The issue is when onBottom() is called, it doesn't see the items that are in the container.slides() array. Instead, I get "Undefined is not a function".

Since onTop() works fine, it makes me think that it's the relationship between Slide and FeaturedContent that is causing the issue, but I think it should work fine. Any help here would be greatly appreciated.

HTML

        <div class="section-block" data-bind="foreach: slides">
            <div class="row well">
                <div class='control'>
                    <a href='#' data-bind="click: moveUp, ifnot: onTop">
                        <i class="fa fa-arrow-up"></i>
                    </a>
                    <a href='#' data-bind="click: moveDown, ifnot: onBottom">
                        <i class="fa fa-arrow-down"></i>
                    </a>
                    <span class='pull-right'>Remove</span>
                </div>
                <h5 data-bind="text: headline"></h5>
                <p data-bind="text: image"></p>
            </div>
        </div>

JS

var FeaturedContent = function() {
    var self = this;

    self.maxSlides = 14;
    self.slides = ko.observableArray([
        new Slide({}, "I should be last", "someimg", 0, self),
        new Slide({}, "I should be first", "anotherimg", 1, self),
        new Slide({}, "I should be second-", "anotherimg", 2, self),
    ]);

    // ... snipped.

};

var Slide = function(contentItem, headline, image, order, container) {
    var self = this;

    // -- Data
    self.contentItem = contentItem;
    self.headline = headline;
    self.image = image;
    self.position = ko.observable(0);

    self.onBottom = ko.computed(function() {
        return (self.position() === container.slides().length - 1) ? true : false;
    });

    self.onTop = ko.computed(function() {
        return (self.position() === 0) ? true : false;
    });

    return self;
};

Updated to be less verbose.

Jack Slingerland
– Jack Slingerland

2014-06-03 17:33:50 +00:00
Commented Jun 3, 2014 at 17:33 — Jack Slingerland
– Jack Slingerland, Commented Jun 3, 2014 at 17:33

GSerjo · Accepted Answer · 2014-06-03 17:54:20Z

3

During creating

self.slides = ko.observableArray([
    new Slide({}, "I should be last", "someimg", 0, self),
    new Slide({}, "I should be first", "anotherimg", 1, self),
    new Slide({}, "I should be second-", "anotherimg", 2, self),
]);

in the FeaturedContent your code will create new Slide and use self to get container.slides().length i.e. self is the container but slides() has not created. It's a circle reference. So container.slides() is undefined.

try something like this container.slides() && self.position() === container.slides().length - 1

answered Jun 3, 2014 at 17:54

GSerjo

4,7971 gold badge40 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Slingerland Over a year ago

That makes sense. Thanks. I opted to create an empty slides array and then push new Slide instances onto it.

Collectives™ on Stack Overflow

Knockout computed observable with access to observableArray

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related