0

这是我的带有“现代”网络组件模板的 html ：

<html dir="ltr" lang="en-US">   
    <body>                  
                <template>                  
                    <table>
                        {{#each items}}
                        <tr>                            
                            <td>
                                {{email}}
                            </td>                           
                            <td>
                                {{phone}}
                            </td>                           
                        </tr>
                        {{/each}}
                    </table>                    
                </template>
    </body> 
</html>

Ans 这是我在浏览器（Chrome 和 Firefox）中得到的：

<html dir="ltr" lang="en-US"><head></head><body>                    
                <template>                  
                    
                        {{#each items}}
                        
                        {{/each}}
                    <table><tbody><tr>                          
                            <td>
                                {{email}}
                            </td>                           
                            <td>
                                {{phone}}
                            </td>                           
                        </tr></tbody></table>                   
                </template>
        




</body></html>

很明显，车把卷曲标签被吊到顶部。模板不应该保持内部数据完整以供将来渲染吗？那么我们是否只有使用<script type="shame-on-html">而不是直观的选择<template>？

（请忽略这一行：浏览器何时会更多地支持动态网页内容，以及 React 的统治何时结束？）

4

1 回答 1

0

template标签内容不会被浏览器忽略。

将模板视为存储以供后续在文档中使用的内容片段。虽然解析器在加载页面时确实会处理元素的内容，但它这样做只是为了确保这些内容是有效的；但是，不会呈现元素的内容。

MDN

所以内容被解析和验证。table元素具有特定的列表和允许内容的顺序。因此，当template解析内容时，不支持的内容将从table.

如果您p在表中使用标签，您可以看到相同的行为。

<template>                  
    <table>
        <p>
        <tr>                            
            <td>
                {{email}}
            </td>                           
            <td>
                {{phone}}
            </td>                           
        </tr>
        </p>
    </table>                    
</template>

另一种方法是将模板存储在 JavaScript 中，并在将其插入 DOM 之前使用 Handlebars 对其进行处理。

<script>                  
    const template = `<table>
        {{#each items}}
        <tr>                            
            <td>
                {{email}}
            </td>                           
            <td>
                {{phone}}
            </td>                           
        </tr>
        {{/each}}
    </table>`;
</script>
于 2021-06-11T00:11:30.960 回答