Question

我有以下一段代码，其中有一堆笔记，但我只想显示这个div，如果selectedNotes不为null。我使用了长度属性，它运行良好。

    <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>

我的问题是div内的跨度显示错误，无论是否设置了selectedNotes对象。错误是“data.selectedNotes为null”。这是为什么？如果它在div中不应该通过不显示段落来正常工作吗？

我已将代码放在这个小提琴中：http://jsfiddle.net/armydee/Z9wBJ/

Answer 1

我更新了你的jsfiddle：http://jsfiddle.net/Z9wBJ/1/

可见绑定只是将CSS'display'属性设置为'none'来隐藏div。但内容仍然在DOM中呈现。如果selectedNotes为null，则尝试测试selectedNodes.length将导致javascript错误。您只需包含空检查：

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

和

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

jsViews - 在data-link属性中使用visible无法正常工作

1 个答案: