Question

Hi I’m trying to make the first element of my observableArray hidden, the following doesn’t appear to be working, any ideas?

data-bind=”ifnot: $root.typedData[0]===$data”
http://jsfiddle.net/Lx8jR/

<table border="1" style="width:90%">
    <tr>
        <td data-bind="text: typedData()[0].name"></td>
        <td data-bind="text: typedData()[0].type"></td>
    </tr>

    <tr>
        <td>
            <table data-bind="foreach: typedData()">
                <tr>
                    <td data-bind="text: name"></td>
                </tr>
            </table>            
        </td>
        <td>
            <table data-bind="foreach: typedData()">
                <tr data-bind="ifnot: $root.typedData[0]===$data">
                    <td data-bind="text: type">

                    </td>
                    <td data-bind="text: $index">
                    </td>  
                </tr>
            </table>           
        </td>        
    </tr>
</table>


var ViewModel = function() {
    var self = this;
    this.typedData = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]).indexed();
}

Answer 1

Looks like you missed a () on that line.

ifnot: $root.typedData[0]===$data

becomes

ifnot: $root.typedData()[0]===$data

http://jsfiddle.net/Lx8jR/1/

A simple mistake I’ve made a few dozen times.

If you get into the habit of using ko.utils.unwrapObservable this becomes less of an issue. If you use that function on a non-observable, it still succeeds.

... ko.utils.unwrapObservable($root.typedData)[0]

And for reference, there’s an article on KnockMeOut which suggests a few other standards that help simplify our templates and bindings.