Formulare Backbone și șablon personalizat (Programare, Formulare, Șabloane, Backbone.Js, Underscore.Js, Formulare Backbone)

Ieșire de urgență a intrebat.
a intrebat.

Este prima dată când lucrez cu plug-in-ul backbone-forms și sunt de asemenea nou la Backbonejs. Implementez un formular simplu, dar randarea standard a backbone-forms nu se potrivește nevoilor mele. Citind documentația reiese că pot seta un șablon de subliniere personalizat, dar nu reușesc să înțeleg cum să redau etichetele câmpurilor.

Mă poate ajuta cineva?

EDIT:

Luând în considerare următoarele:

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

și următorul șablon:

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

Cum pot face ca Backbone-form să construiască automat etichete?

Ceva de genul:

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

calculat ca:

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

2 răspunsuri
Leonardo Barbosa

Puteți verifica documentația pentru etichete în acest link: Atribute principale – Backbone Forms.

Atributul pe care îl căutați este atributul title. Descriere:

Definește textul care apare în câmpul de formular . Dacă nu este definit, se utilizează în mod implicit o versiune formatată a cheii de câmp camelCased. De exemplu, firstName devine First Name. Acest comportament poate fi modificat prin atribuirea unei funcții proprii la Backbone.Form.helpers.keyToTitle.

Astfel, puteți utiliza:

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' }
    // ...
  }
}

Dacă nu setați atributul title, titlul etichetei va deveni cheia de câmp camelCased.

Pentru șabloane, puteți verifica Formulare 100% personalizate, care va urma aceeași logică, plasând eticheta urmată de intrarea pe care o doriți.

EDIT:

Dacă doriți să construiți doar elementul label, cred că acest lucru nu este posibil cu backbone-forms. Puteți găsi elementele posibile la adresa Definiția schemei. Conceptul unui element label este acela de a reprezenta o legendă pentru un alt element din ecran. Vă rugăm să verificați documentul Documentația despre etichete la MDN. Așadar, backbone-forms va plasa întotdeauna o etichetă, dar aceasta va veni împreună cu datele de intrare.

Cred că puteți plasa pur și simplu o etichetă în șablonul dvs. pentru a obține comportamentul pe care îl doriți.

Comentarii

  • Ok, întrebarea mea are nevoie de mai multe clarificări. –  > Por Ieșire de urgență.
  • Doriți să construiți doar elementul label? –  > Por Leonardo Barbosa.
  • mai mult sau mai puțin… vezi EDIT în întrebare –  > Por Ieșire de urgență.
  • Am editat și răspunsul meu 🙂 –  > Por Leonardo Barbosa.
  • Puteți, de asemenea, să suprascrieți șablonul de câmp, ceea ce vă va permite să personalizați amplasarea etichetei și a editorului. Apoi, în șablonul principal al formularului dvs., utilizați data-fields=”age” în loc de data-editors=”age” –  > Por evilcelery.
Nikolay Fominyh

După cum putem vedea – răspuns în comentariul lui @evilcelery. Pentru a avea etichete în formularul cu șablon personalizat folosiți:

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