ko if problem

[jjf...@gmail.com]

Hello,

In my view, I'm trying to do something like this:

        <!-- ko if: $root.slideTxt()[3].hideSlide == "true" -->

        <div id="slide4">

                <span class="slideTitle1">Welcome</span>

                <span class="slideSisterName" data-bind="text: slideTxt()[3].header"></span>

                <span class="slideContent" data-bind="text: slideTxt()[3].slideContent"></span>

        </div>

        <!-- /ko -->

my if statement above does not work:

Uncaught TypeError: Unable to process binding "if: function (){return $root.slideTxt()[3].hideSlide =="true" }"

Message: Cannot read property 'hideSlide' of undefined

my viewModel:

        console.log("slideTxt:", viewModel.slideTxt()[3]);

        console.log("hideSlide:", viewModel.slideTxt()[3].hideSlide);

returns:

slideTxt: Object {slideId: 104, header: "Welcome Insert Name", slideContent: "Please join us in welcoming Insert Name. Bla...bla...bla...", hideSlide: "true"}

hideSlide: true

Thanks, 

Jeff

[bmey...@gmail.com]

can you use an actual boolean instead of a string?

<!-- ko if: $root.slideTxt()[3].hideSlide -->

slideTxt: Object {slideId: 104, header: "Welcome Insert Name", slideContent: "Please join us in welcoming Insert Name. Bla...bla...bla...", hideSlide: true}

Brandon

[Ian Yates]

I suspect your array doesn't have an element at index 3 (maybe it's not that long, or not an array at all?)...  If the javascript parser is getting as far as complaining about hideSlide, and not about being unable to invoke a function then your   $root.slideTxt()   call is at least working but isn't returning what you expect.

Use F12 tools in your modern browser of choice (I know this works in IE 11 and Chrome - unsure of others).

Highlight your <ko if:....> node.

In the console, type

ko.contextFor($0)

You'll get back an object with $root, $data, $parent, etc.

Then try

ko.contextFor($0).$root.slideTxt

You should get the text of the slideTxt function.

Then try

ko.contextFor($0).$root.slideTxt()

You're expecting an array to come back from that call with 4 elements.  I suspect that's not the case.  Fix that, and you'll be past your error.

And as Brandon suggested, try to just use Boolean true rather than a string that's equal to "true"...  That's just confusing for others that might be looking at the code later :)

Let us know how you go

[doob...@gmail.com]

When I'm stuck with a reference error I often try the trick in this post: http://www.endyourif.com/knockout-uncaught-referenceerror-unable-to-process-binding/

Above your if statement you can try writing the data with ko.toJSON to see what the state is just before the if statement executes.

[jjf...@gmail.com]

Thanks everyone for the replies,

I change "hideSlide" to "show" and it is now a true boolean. I also renamed "header" to "title"

Here's the results of <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
At the bottom of the list I made a computed:

viewModel.slide4 = ko.computed(function () {

    var s4 = this.slideTxt()[3];

    return s4 ? ko.utils.arrayFilter(this.slideTxt(), function (item) {

        return item.slideId == s4.slideId;

    }) : this.slideTxt;

}, viewModel);

 

{

  "slideTxt": [

    {

      "slideId": 100,

      "title": "",

      "slideContent": "",

      "show": true

    },

    {

      "slideId": 102,

      "title": "Slide 2 Header",

      "slideContent": "This is slide 2 text",

      "show": true

    },

    {

      "slideId": 103,

      "title": "Slide 3 Header",

      "slideContent": "This is slide 3 text",

      "show": true

    },

    {

      "slideId": 104,

      "title": "Sister Insert Name",

      "slideContent": "Please join us in welcoming Sister Insert Name. She comes from \"Insert place\" and enjoy's \"this and that\"",

      "show": true

    },

    {

      "slideId": 105,

      "title": "Slide 5 Header",

      "slideContent": "This is slide 5 text",

      "show": true

    },

    {

      "slideId": 106,

      "title": "Slide 6 Header",

      "slideContent": "This is slide 6 text",

      "show": true

    },

    {

      "slideId": 107,

      "title": "Slide 7 Header",

      "slideContent": "This is slide 7 text",

      "show": true

    }

  ],

  "slide4": [

    {

      "slideId": 104,

      "title": "Sister Insert Name",

      "slideContent": "Please join us in welcoming Sister Insert Name. She comes from \"Insert place\" and enjoy's \"this and that\"",

      "show": true

    }

  ]

}

ko.contextFor($0).$root.slide4()

[Objectshow: trueslideContent: "Please join us in welcoming Sister Insert Name. She comes from "Insert place" and enjoy's "this and that""slideId: 104title: "Sister Insert Name"__proto__: Object__defineGetter__: function __defineGetter__() { [native code] }__defineSetter__: function __defineSetter__() { [native code] }__lookupGetter__: function __lookupGetter__() { [native code] }__lookupSetter__: function __lookupSetter__() { [native code] }constructor: function Object() { [native code] }hasOwnProperty: function hasOwnProperty() { [native code] }isPrototypeOf: function isPrototypeOf() { [native code] }propertyIsEnumerable: function propertyIsEnumerable() { [native code] }toLocaleString: function toLocaleString() { [native code] }toString: function toString() { [native code] }valueOf: function valueOf() { [native code] }get __proto__: function __proto__() { [native code] }set __proto__: function __proto__() { [native code] }

[Noirabys]

perhaps do you fill your slideText array after applyBindings ?

try

  <!-- ko if:  $root.slideTxt().length > 3 &&  $root.slideTxt()[3].hideSlide == "true" -->