2012-07-11 16 views
6

Przede wszystkim dzięki chłopakom z backbone-forms, którzy stworzyli narzędzie, które idealnie integruje się w szkielecie backbone.js.formy szkieletowe z polami warunkowymi

Używam backbone.js z wtyczką typu backbone-forms, ale potrzebuję utworzyć pola warunkowe.

Załóżmy, że mam następujący formularz. Chcę pokazać (lub nie) jedno wejście liniowe z tekstem lub tekstem zgodnie z wartością wybraną w select.

<form method="post" action="">     
    <select > 
     <option value="" selected="selected">choose one</option> 
     <option value="1" >line</option> 
     <option value="2" >area</option> 
    </select> 
    <input id="element_1" /> 
    <textarea id="element_2" ></textarea> 
</form> 

Takie zachowanie jest domyślnie stosowane w sieci szkieletowej?

Jeśli nie, jak mogę zaimplementować go za pomocą javascript i backone-form?

dzięki.

+0

http://jsfiddle.net/evilcelery/c5QHr/ –

Odpowiedz

2

Nie ma domyślnego implementation.In fakt, całkowicie na własną rękę jest również bardzo proste, należy odwołać się do następującego kodu:

//Pseudo code 
var line = $("element_1"),area = $("element_2"); 
if(selectvalue ==="1"){ 
    line.show(); 
    area.hide(); 
} 
else{ 
    line.hide(); 
    area.show(); 
} 
+0

dziękuję za swój odpowiedź. +1! Jednak zastanawiałem się, czy istnieje sposób na uwzględnienie skryptu w modelach/schematach szkieletowych? –

7

można powiązać zdarzenia do elementu select i je przełączać widoczność inne elementy formularza.

Spróbuj tego:

$(function() { 

    //The form 
    var form = new Backbone.Form({ 
     schema: { 
      inputType: { type: 'Select', options: ['line', 'area'] }, 
      line: 'Text', 
      area: 'TextArea' 
     } 
    }).render(); 

    form.fields['area'].$el.hide(); 

    form.on('inputType:change', function(form, editor) {   
     form.fields['line'].$el.toggle(); 
     form.fields['area'].$el.toggle(); 
    }); 

    //Add it to the page 
    $('body').append(form.el); 
}); 

Oto niektóre kodu na żywo: http://jsfiddle.net/shioyama/grn6y/

Pochodzące z tego: https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/discussion

+0

Zaktualizowałem jsfiddle połączony w tej odpowiedzi, aby użyć rawgit.com zamiast raw.github.com - zapewnia to odpowiedni typ MIME, więc przeglądarki będą uruchamiać JS, który chcemy wczytać. http://jsfiddle.net/grn6y/43/ –

Powiązane problemy