2012-07-11 25 views
6

Trước hết là nhờ các chàng trai của backbone-forms, người đã tạo ra một công cụ tích hợp hoàn hảo trong khung công tác backbone.js.các hình thức xương sống với các trường có điều kiện

Tôi đang sử dụng backbone.js với plugin hình thức xương sống, nhưng tôi cần phải tạo các trường có điều kiện.

Giả sử tôi có biểu mẫu sau. Tôi muốn hiển thị (hoặc không) một đầu vào dòng đơn vớixt hoặc một vùng văn bản theo giá trị được chọn trong 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> 

Hành vi như thế này được thực hiện theo mặc định trong xương sống?

Nếu không, làm thế nào tôi có thể triển khai nó bằng javascript và các biểu mẫu được sao lưu?

cảm ơn.

+0

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

Trả lời

2

Không có mặc định implementation.In thực tế, hoàn toàn một mình cũng rất đơn giản, xin vui lòng tham khảo các đoạn mã sau:

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

Cảm ơn rất nhiều cho bạn câu trả lời. +1! Tuy nhiên tôi đã tự hỏi nếu có một cách để bao gồm các kịch bản trong mô hình/mô hình xương sống-hình thức? –

7

Bạn có thể liên kết các sự kiện để các yếu tố lựa chọn và họ đã chuyển tầm nhìn của các phần tử biểu mẫu khác.

Hãy thử điều này:

$(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); 
}); 

Dưới đây là một số mã trực tiếp: http://jsfiddle.net/shioyama/grn6y/

Xuất phát từ điều này: https://groups.google.com/d/topic/backbone-forms/X5eVdTZWluQ/discussion

+0

Tôi đã cập nhật jsfiddle được liên kết trong câu trả lời này để sử dụng rawgit.com thay vì raw.github.com - điều này cung cấp loại MIME phù hợp để trình duyệt sẽ chạy JS mà chúng tôi muốn tải. http://jsfiddle.net/grn6y/43/ –

Các vấn đề liên quan