jsViews - using visible in data-link attribute not working correctly

Question

I have the following piece of code which has a bunch of notes but I only want to show this div if the selectedNotes is not null. I used the length attribute which has worked fine.

    <div id="notesContainer" data-link="visible{:selectedNotes.length != 0}">
        <ul id="notes">
        {^{if selectedNotes != null}}
        {^{for selectedNotes}}
            <li>{^{:Value}}</li>
        {{/for}}
        {{/if}}
        </ul>

        <p>There are <span data-link="{:selectedNotes.length}"></span> notes so far...</p>

        <a id="addNote" data-toggle="modal" href="#addNoteModal" class="btn btn-primary">Add note</a>

    </div>

My problem is the span within the div shows an error regardless of whether the selectedNotes object is set. The error is "data.selectedNotes is null". Why is that? If it's within the div shouldn't it be working correctly by not showing the paragraph?

I have put the code in this fiddle: http://jsfiddle.net/armydee/Z9wBJ/

Answer 1

I have updated your jsfiddle: http://jsfiddle.net/Z9wBJ/1/

The visible binding simply sets the CSS 'display' property to 'none' to hide the div. But the contents are still rendered in the DOM. If selectedNotes is null, then trying to test selectedNodes.length will cause a javascript error. You can simply include a null check:

"visible{:selectedNotes && selectedNotes.length != 0}">

and:

<span data-link="{:selectedNotes && selectedNotes.length}">