Question

我正在使用HTML / JS开发Windows 8应用程序。我遇到了模板渲染的问题。段落“row”不呈现，只有h4和h6。如果我将“p”改为“h3”或“h4”等，它就会起作用。我还试图将data-win-bind属性“innerText”更改为“text”和“textContent”，但没有成功。

我不想到处都是标题。为什么不起作用？我见过一些例子，人们似乎没有问题地使用“p”。

HTML：

<div id="detailedViewTemplate" data-win-control="WinJS.Binding.Template">
    <h4 data-win-bind="innerText: DiareNumber" />
    <h6 data-win-bind="innerText: Company" />
    <p data-win-bind="innerText: Administrator" />
    ...
</div>

Answer 1

经过一些测试后，我发现问题是标题标记<h6>和<h4>的标记自动关闭。它必须正确关闭，除非解析不能按预期工作。 HTML5不允许在非空元素上使用“自动关闭”标记。

经过一番研究后，我发现这个网站解释了原因： http://tiffanybbrown.com/2011/03/23/html5-does-not-allow-self-closing-tags/

在这种情况下<p>不需要结束标记，如果p元素紧跟着地址，文章，旁边，blockquote，dir，div，dl，fieldset，footer，form，h1 ，h2，h3，h4，h5，h6，header，hgroup，hr，menu，nav，ol，p，pre，section，table，or ul，element ，或者如果父级中没有其他内容element和父元素不是元素。

<强>解决方案

所以改变：

<div id="detailedViewTemplate" data-win-control="WinJS.Binding.Template">
    <h4 data-win-bind="innerText: DiareNumber" />
    <h6 data-win-bind="innerText: Company" />
    <p data-win-bind="innerText: Administrator" />
    ...
</div>

为：

<div id="detailedViewTemplate" data-win-control="WinJS.Binding.Template">
    <h4 data-win-bind="innerText: DiareNumber"></h4>
    <h6 data-win-bind="innerText: Company"></h6>
    <p data-win-bind="innerText: Administrator"></p> <!-- optional -->
    ...
</div>

现在它没有任何问题！

WinJS模板<p>无法渲染</p>

1 个答案: