骨干表单和自定义模板

Eme*_*xit 1 forms templates backbone.js underscore.js backbone-forms

这是我第一次使用骨干表单插件,而且我也是Backbonejs的新手.我正在实现一个简单的表单,但标准的骨干表单'renderd不符合我的需要.阅读文档,我可以设置自定义下划线模板,但我无法理解如何渲染字段的标签.

有人能帮我吗?

编辑:

考虑以下因素:

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

和以下模板:

<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>
Run Code Online (Sandbox Code Playgroud)

如何让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>
Run Code Online (Sandbox Code Playgroud)

计算如下:

<label for="c1_age">Age</label>
Run Code Online (Sandbox Code Playgroud)

Leo*_*osa 6

您可以在以下链接中查看标签文档:主要属性 - 骨干表单.

您要查找的属性是标题.描述:

定义表单字段中显示的文本.如果未定义,则默认为camelCased字段键的格式化版本.例如firstName成为名字.通过将自己的函数分配给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' }
    // ...
  }
}
Run Code Online (Sandbox Code Playgroud)

如果未设置title属性,则标签标题将成为camelCased字段键.

对于模板,您可以检查100%自定义表单,它们将遵循相同的逻辑,将标签后跟您想要的输入.

编辑:

如果你只想构建标签元素,我相信骨架形式是不可能的.您可以在Schema Definition中找到可能的元素.标签元素的概念是表示屏幕中另一个元素的标题.请查看MDN上标签文档.因此,骨干形式总是会贴上标签,但它会带有输入.

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

  • 您还可以覆盖Field模板,该模板允许您自定义标签和编辑器位置.然后在主表单模板中,使用data-fields ="age"而不是data-editors ="age" (2认同)