cách tạo biểu mẫu html bằng định nghĩa JSON?

Question

Tôi đang tìm kiếm một javascript javascript cho phép tôi lưu trữ (html) các hình thức ở định dạng JSON, với một chút thông minh được xây dựng vào xác nhận đầu vào phía khách hàng. Một cái gì đó như:

function FormController(){ 
    this.user = { 
    name: 'John Smith', 
    address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'}, 
    contacts:[{type:'phone', value:'1(234) 555-1212'}] 
    }; 
    this.state = /^\w\w$/; 
    this.zip = /^\d\d\d\d\d$/; 
} 

(Điều này được lấy từ http://docs.angularjs.org/#!cookbook.form). Nó gần như những gì tôi muốn, vì nó cung cấp xác nhận hợp lệ phía khách hàng cơ bản với các biểu thức thông thường và bạn có thể cung cấp mặc định nhưng dường như vẫn cần bạn tạo biểu mẫu HTML.

Tôi muốn thứ gì đó chỉ yêu cầu định nghĩa. Bất kỳ ý tưởng?

Answer 1

Khám phá jQuery Templates plugin.
Một thời gian ngắn tôi đã viết một bài đăng trên blog nhỏ trên Client-side Data Binding with jQuery Templates. Dường như với tôi rằng đây chính xác là những gì bạn đang tìm kiếm.

Answer 2

Góc không giải quyết được sự cố của bạn ngoài hộp vì nó giả định rằng bạn có html tĩnh mà bạn muốn ràng buộc một số dữ liệu.

Có nói rằng bạn có thể sử dụng góc cạnh để hoàn thành mục tiêu của mình. Bạn có thể tạo một thẻ mới (tiện ích góc) sẽ lấy đối tượng js và tự động tạo biểu mẫu DOM cùng với tất cả thuộc tính xác thực góc. Sau đó bạn biên dịch biểu mẫu với trình biên dịch của góc và đính kèm nó vào trang của bạn. Điều này sẽ dẫn đến biểu mẫu được tạo động với tất cả các tính năng xác thực và dữ liệu của góc hiện có hoạt động giống như với một html tĩnh.

Không có gì tôi có thể nghĩ về điều đó sẽ ngăn bạn làm điều này thông qua apular angular.widget, nhưng nó không phải là một nhiệm vụ tầm thường.

Bạn có thể cho tôi biết thêm về cấu trúc dữ liệu của bạn không? Tôi tự hỏi nếu chỉ có một tập hợp các mẫu đơn và sử dụng đúng mẫu vào đúng thời điểm sẽ không đủ. Tại sao bạn cần tạo biểu mẫu theo hoàn toàn năng động và hướng dữ liệu?

UPDATE: Các giải pháp góc có thể được tìm thấy tại https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs

Answer 3

Trong chương trình khuyến mãi tự biết xấu hổ Tôi cũng muốn đề cập đến jQuery.dForm plugin tôi. Nó đã được khoảng một thời gian bây giờ và hỗ trợ các plugin xác nhận jQuery, jQuery UI và dễ dàng mở rộng. Đây là hình thức của nó:

var formdata = 
{ 
    "action" : "index.html", 
    "method" : "get", 
    "elements" : 
    [ 
     { 
      "name" : "textfield", 
      "caption" : "Label for textfield", 
      "type" : "text", 
      "value" : "Hello world" 
     }, 
     { 
      "type" : "submit", 
      "value" : "Submit" 
     } 
    ]   
}; 
$("#myform").buildForm(formdata); 

// Or to load the form definition via AJAX 
$("#myform").buildForm("http://example.com/myform.json"); 

Answer 4

Kiểm tra InputEx, có vẻ như chính xác những gì bạn muốn.

Nó sử dụng JSON để xác định hình thức toàn bộ:

// Create a schemaIdentifierMap 
var schemaIdentifierMap = { 
// Person definition 
"Person": { 
    "id": "Person", 
    "description":"A person", 
    "type":"object", 
    "properties": { 
     "name": { "type":"string"}, 
     "born" : { "type":"string", "format":"date", "optional":true}, 
     "gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]}, 
     "grownup": { "type": "boolean" }, 
     "favoritecolors": { "type": "array" }, 
     "address": { 
      "type":"object", 
      "properties":{ 
       "street":{"type":"string"}, 
       "city":{"type":"string"}, 
       "state":{"type":"string"} 
      } 
     } 
    } 
} 
}; 

(từ http://neyric.github.com/inputex/examples/json-schema.html)

Answer 5

tôi sẽ đề nghị sử dụng JSON Form.

Phải mất JSON Schema và có thể tạo biểu mẫu ngay lập tức, đồng thời cung cấp cho bạn các tùy chọn để tùy chỉnh biểu mẫu thêm. Ví dụ:

$('#myform').jsonForm({ 
    schema: { 
    name: { 
     type: 'string', 
     title: 'Name', 
     required: true 
    }, 
    age: { 
     type: 'number', 
     title: 'Age' 
    } 
    } 
}); 

… sẽ tạo biểu mẫu có hai yếu tố đầu vào trong phần tử #myform. (jQuery là tùy chọn.)

Sử dụng JSON Schema định dạng được chuẩn hóa cung cấp các lợi thế tuyệt vời khác và nhiều công cụ hơn để làm việc với định nghĩa dữ liệu.

Answer 6

Chắc chắn kiểm tra Alpaca: http://www.alpacajs.org

Nó render dạng HTML từ JSON Schema sử dụng Bootstrap, jQueryUI, jQuery Mobile hoặc điều khiển web thẳng. Nó có một thư viện lớn các điều khiển và tất cả các loại tính năng tiện lợi.

Chúng tôi sử dụng nó tại Cloud CMS (http://www.cloudcms.com) để hiển thị một số giao diện người dùng thực sự trực quan.

Bản thân Alpaca được cấp phép Apache 2.0 và trên GitHub (https://github.com/gitana/alpaca).

Phiên bản 1.5.0 sắp tới giới thiệu hỗ trợ Handlebars tinh khiết và bản dựng gulp tùy chỉnh. Những thứ tuyệt vời.

Answer 7

Tôi có thể đề xuất một cách khiêm tốn Metawidget không?

Nó tạo biểu mẫu HTML từ các đối tượng JSON phức tạp tùy ý. Ví dụ đơn giản JavaScript:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script> 
     <style> 
     #metawidget { 
      border: 1px solid #cccccc; 
      width: 250px; 
      border-radius: 10px; 
      padding: 10px; 
      margin: 50px auto; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="metawidget"></div> 
     <script type="text/javascript"> 
     var mw = new metawidget.Metawidget(document.getElementById('metawidget')); 
     mw.toInspect = { 
      firstname: 'Homer', 
      surname: 'Simpson', 
      age: 36 
     }; 
     mw.buildWidgets(); 
     </script> 
    </body> 
</html> 

Nó cũng hỗ trợ:

• làm tăng đối tượng JSON với các nguồn bổ sung của siêu dữ liệu, chẳng hạn như JSON Schema hoặc siêu dữ liệu từ các dịch vụ REST
• khuôn khổ như JQuery UI, JQuery Thiết bị di động, AngularJS
• thư viện thành phần của bên thứ ba và trình xác thực
• bố cục có thể cắm được

Answer 8

Tôi đồng ý với Jeremy SAngular Schema Form là xuất sắc. Nó theo cùng một kiểu như JSON Form và tôi đã bắt đầu sử dụng nó trong sản xuất và nó hoạt động rất tốt.

Nó cũng có thể mở rộng và tôi đã nhanh chóng viết một công cụ để đọc định nghĩa siêu giản đồ và kéo các tùy chọn trường chọn từ nguồn bên ngoài và xem các trường liên quan khác cho dữ liệu của chúng trước khi thực hiện. Nó chỉ mất một ngày để xây dựng điều đó, đủ để nói rằng nó thực sự dễ dàng mở rộng và vì nó cũng tận dụng lợi thế của Angular tôi sẽ phân loại nó là sự lựa chọn tốt nhất.

Nếu bạn không sử dụng Angular thì Biểu mẫu JSON sẽ là tùy chọn ưa thích của tôi vì tôi thấy mẫu lược đồ và biểu mẫu của nó nổi lên như một tiêu chuẩn với hai dự án này sử dụng nó. Ngoài ra, kinh nghiệm của tôi làm việc trong quản lý dịch vụ doanh nghiệp có ý nghĩa vì gần như tất cả các công cụ quản lý dịch vụ đều có một mô hình dữ liệu và sau đó là một thành phần quản trị thiết kế biểu mẫu để mở rộng mô hình.

Tuyên bố từ chối trách nhiệm: Tôi không duy trì Biểu mẫu dạng góc khi tôi viết bài này.

Tôi chỉ trở thành người duy trì dự án sau một năm vì tôi đã yêu thích nó.

Answer 9

Hãy xem brutusin:json-forms.

Nó chấp nhận JSON-Schema và dữ liệu JSON ban đầu để điền vào biểu mẫu.

Answer 10

Tôi đã sử dụng Trình soạn thảo JSON của Jeremy Dorn cho các ứng dụng khác nhau và luôn hài lòng với nó! Nó sử dụng JSON Schema, và cho biết thêm một số tùy chọn cho thế hệ hình thức (như bạn hình dung có thể có một loạt các đầu vào cho một loại nhất định của cấu trúc dữ liệu)

https://github.com/jdorn/json-editor