骨干表单和自定义模板

Question

这是我第一次使用骨干表单插件，我也是Backbonejs的新手。我正在实现一个简单的表单，但呈现的标准主干表单不符合我的需求。阅读文档后发现我可以设置自定义下划线模板，但我无法理解如何呈现字段的标签。

有人可以帮助我吗？

编辑：

考虑以下几点：

var form = new Backbone.Form({
  template: _.template($('#formTemplate').html()),
  schema: {
    age: { type: 'Number', title: "Age" },
    name: { title: "Name" }
  }
});

和以下模板：

<script id="formTemplate" type="text/html">
    <form>
        <div data-editors="age"><!-- age editor will be added here --></div>
        <div data-editors="name"><!-- nameeditor will be added here --></div>
    </form>
</script>

如何让主干表单构建自动标记？

像这样：

<label data-label="age"><!-- I wish the label was added here --></label>
<div data-editors="age"><!-- age editor will be added here --></div>

计算公式为：

<label for="c1_age">Age</label>

Answer 1

您可以在此链接中查看标签文档：主要属性 - 主干表单。

您要查找的属性是标题。描述：

定义表单域的 .如果未定义，则默认为驼峰字段键的格式化版本。例如，名字变成名字。可以通过将自己的函数分配给 Backbone.Form.helpers.keyToTitle 来更改此行为。

因此，您可以使用：

var User = Backbone.Model.extend({
  schema: {
    // CHECK THE ATTRIBUTE 'title' HERE
    title: { title: 'Title', type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },
    name: { type: 'Text', title: 'Your Name' }
    // ...
  }
}

如果不设置 title 属性，则标签标题将成为驼峰字段键。

对于模板，您可以检查 100% 自定义表单，这些表单将遵循相同的逻辑，将标签放在所需的输入后。

编辑：

如果你只想构建标签元素，我相信这在骨干表单中是不可能的。您可以在架构定义中找到可能的元素。标签元素的概念是表示屏幕中另一个元素的标题。请查看 MDN 的标签文档。因此，主干表单将始终放置一个标签，但它会随输入一起出现。

我认为您可以在模板中放置一个标签即可获得所需的行为。

Answer 2

正如我们所看到的 - @evilcelery在评论中回答。要使用自定义模板在表单中包含标签，请使用：

<script id="formTemplate" type="text/html">
    <form>
        <div data-fields="age,name"></div>
    </form>
</script>