Question

I have the following function defined on my view model that checks to see if an item in an array is an image and whether it is the first item in the array:

    self.isCoverImage = function(item) {
        return item.isImage && media.indexOf(item) === 0;
    };

Is is possible to bind to this within my item template using an if binding in a comment expression? I tried the following but nothing is passed to the isCoverImage function.

<!-- ko if: $parent.isCoverImage($data) -->
        <i class="img-ribbon-cover-image"></i>
<!-- /ko -->

Answer 1

I think it must be an issue with your outer foreach loop or whatever it is… or maybe you need to add ‘self.media’ instead of just ‘media’.

I made a JS fiddle and it seems to work as expected: http://jsfiddle.net/RYXdA/

Here is the HTML:

<div data-bind="foreach: media">
    <div>
        <span data-bind="text: id"></span>
        <!-- ko if: $parent.isCoverImage($data) -->
            <i class="img-ribbon-cover-image">Image</i>
        <!-- /ko -->
    </div>
</div>

And the Javascript:

var viewModel = {
    media: [
        { id: 1, isImage: true},
        { id: 2, isImage: false },
        { id: 3, isImage: true }
    ]
};    

viewModel.isCoverImage = function(item) {
    return item.isImage && viewModel.media.indexOf(item) === 0;
};

ko.applyBindings(viewModel);