JSF 传递元素导致杂散结束标记答案

【问题标题】：JSF Pass-Through Elements Causes Stray End TagsJSF 传递元素导致杂散结束标记
【发布时间】：2014-10-28 20:35:46
【问题描述】：

在我的 JSF 项目中，我尝试使用 JSF pass-through 来利用与 HTML5 兼容的标记，而不是 PrimeFaces 组件。但它似乎会导致空元素（如 hr、img、br）的额外结束标签破坏了我的布局。

这是我的完整代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:jsf="http://xmlns.jcp.org/jsf">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>JSF Passthrough Test</title>
</head>
<body>
    <form>
        <input id="inputSearch" size="40" value=""/>
        <button type="button" class="btn btn-default" jsf:id="searchbutton">
            <span class="glyphicon glyphicon-search"></span> Find
        </button>
    </form>
    <img src="http://i.imgur.com/atz81.jpg" alt="Cat + Unicorn"/>
</body>
</html>

这传递给浏览器的是一个额外的结束 img 标记，用于我在它之后的图像。（如果我将图像移动到按钮之前，没问题。）

<img src="http://i.imgur.com/atz81.jpg" alt="Cat + Unicorn" />
</img>

我在这里有什么遗漏或做错了吗？谢谢。

【问题讨论】：

标签： html jsf primefaces pass-through

【解决方案1】：

那里！我创建了一个复制您的代码行的项目。我没有在 DOM 上呈现额外的 img 标签，但是，它呈现给我一条 JSF 警告消息。您要转发此消息吗？

如果是这样，原因是您的 HTML5 标记中缺少一些 JSF 属性，例如表单、头部和正文标记的 jsf:id。如果您不指定任何 jsf 属性，JSF 将忽略此标记并且不会将其转换为等效的 JSF。因此，请尝试对您的代码进行以下更改：

<head jsf:id="head">
    <!-- YOUR HEADER TAGS HERE  -->
</head>

<body jsf:id="body">
       <form jsf:id="frmMain">
          <!-- YOUR BODY TAGS GOES HERE -->
       </form>
</body>

注意，您的输入未指定任何 jsf 属性。因此，它不会呈现为 JSF 组件。而且，您没有将引导程序 CSS/JS 链接到您的页面中。我假设你只是忽略了它。

嗯，希望对你有帮助。赛亚！

【讨论】：