呈现单选按钮

Question

如何使用 Maquette 正确定义单选按钮以便呈现文本？如果我使用  元素，文本会出现，但会换行。

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("p", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("p", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("p", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

但是，如果我使用   元素，文本不会出现。

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq"}),
      h("br", ["5 Hz"]),
      h("input", {type: "radio", value: "10", name: "freq"}),
      h("br", ["10 Hz"]),
      h("input", {type: "radio", value: "15", name: "freq"}),
      h("br", ["15 Hz"]),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

我做错了什么？

Answer 1

问题出在   标签上。通常，它用作空的、自闭合的标签（  或  ）。 You can read more here，允许的内容- None，它是一个空元素。

您可以将文本放在内联元素中，例如  或使用 <label> 的事件更好，在输入上使用 id 并在标签上使用 for 属性.然后，在每一行之后放置一个空的   以分隔不同的单选按钮。

这是解决方案本身：

var h = maquette.h;
var dom = maquette.dom;

document.addEventListener('DOMContentLoaded', function () {
    var form = h("form", [
      h("input", {type: "radio", value: "5", name: "freq", id: "freq1"}),
      h("label", {innerHTML: "5 Hz", "for": "freq1"}),
      h("br"),
      h("input", {type: "radio", value: "10", name: "freq", id: "freq2"}),
      h("label", {innerHTML: "10 Hz", "for": "freq2"}),
      h("br"),
      h("input", {type: "radio", value: "15", name: "freq", id: "freq3"}),
      h("label", {innerHTML: "15 Hz", "for": "freq3"}),
   ]);
  document.body.appendChild(dom.create(form).domNode);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

呈现单选按钮

Rendering radio buttons

javascript

maquette

virtual-dom