1

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

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

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

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

4

1 回答 1

1

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

可见绑定只是将 CSS 的“显示”属性设置为“无”以隐藏 div。但内容仍然呈现在 DOM 中。如果 selectedNotes 为 null，则尝试测试 selectedNodes.length 将导致 javascript 错误。您可以简单地包含一个空检查：

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

和：

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

于 2013-08-01T23:16:31.993 回答