主干表单和自定义模板答案

【问题标题】：Backbone forms and custom template主干表单和自定义模板
【发布时间】：2013-11-13 11:44:20
【问题描述】：

这是我第一次使用主干表单插件，而且我也是 Backbonejs 的新手。我正在实现一个简单的表单，但渲染的标准主干表单不符合我的需求。阅读documentation 发现我可以设置自定义下划线模板，但我不明白如何呈现字段的标签。

有人可以帮我吗？

编辑：

考虑以下几点：

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>

我怎样才能让 Backbone-form 自动构建标签？

类似：

<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>

【问题讨论】：

标签： forms templates backbone.js underscore.js backbone-forms

【解决方案1】：

您可以在此链接中查看标签文档：Main Attributes - Backbone Forms。

您要查找的属性是 title。说明：

定义出现在表单域中的文本。如果未定义，则默认为camelCased 字段键的格式化版本。例如。名字变成名字。可以通过将您自己的函数分配给 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属性，标签标题会变成camelCased字段键。

对于模板，您可以检查100% custom forms，这将遵循相同的逻辑，将标签放在您想要的输入后面。

编辑：

如果您只想构建标签元素，我相信这对于骨干形式是不可能的。您可以在Schema Definition 找到可能的元素。标签元素的概念是表示屏幕中另一个元素的标题。请查看Label Documentation at MDN。因此，主干表单总是会放置一个标签，但它会随输入一起提供。

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

【讨论】：

好的，我的问题需要进一步澄清。
你想只构建标签元素吗？
或多或少...查看问题中的编辑
也编辑了我的答案。 :)
您还可以覆盖字段模板，这将允许您自定义标签和编辑器的位置。然后在您的主表单模板中，使用 data-fields="age" 而不是 data-editors="age"

【解决方案2】：

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

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

【讨论】：