Как создать HTML-форму, используя определение JSON?

Question

Я ищу библиотеку javascript, которая позволила бы мне хранить (html) формы в формате JSON, с небольшим количеством интеллекта, встроенного в клиентскую часть проверки входных данных.Что-то вроде:

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$/;
}

(взято из http://docs.angularjs.org/#!cookbook.form).Это почти то, что я хочу, так как он предлагает базовую проверку на стороне клиента с помощью регулярных выражений, и вы можете указать значения по умолчанию, но, похоже, вам все еще нужно создать HTML-форму.Есть идеи?

Answer 1

В бесстыдной саморекламе я также хотел бы упомянуть мой jQuery.dForm плагин . Он существует уже некоторое время и поддерживает плагин проверки jQuery, пользовательский интерфейс jQuery и легко расширяется. Вот как это выглядит:

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 2

Я бы предложил использовать JSON Form .

. Он принимает JSON Schema и может мгновенно создать для него форму, а также дополнительно предоставить вам возможность настроитьсформировать дальше.Например:

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

… создаст форму с двумя входами в элементе #myform.(jQuery не является обязательным.)

Использование стандартизированного формата JSON Schema дает другие большие преимущества и больше инструментов для работы с определением данных.

Answer 3

Я бы согласился с Джереми С Форма угловой схемы является выдающейся.Он следует той же схеме, что и JSON Form , и я начал использовать его в производстве, и он работает очень хорошо.

Он также расширяемый, и я довольно быстро написал инструмент для чтения гиперопределите схему и извлеките параметры поля выбора из внешнего источника и просмотрите другие связанные поля для их данных, прежде чем делать это.Чтобы построить его, потребовался всего один день, достаточно сказать, что его действительно легко расширить, и поскольку он также использует преимущества Angular, я бы отнес его к лучшим вариантам.

Если вы не используете Angular, то JSON Formбудет моим предпочтительным вариантом, так как я вижу, что его схема и шаблон формы становятся чем-то вроде стандарта с этими двумя проектами, использующими его.Кроме того, учитывая мой опыт работы в области управления сервисами предприятия, это имеет смысл, поскольку почти все инструменты для управления сервисами имеют модель данных, а затем компонент администрирования проектирования форм для расширения модели.Форма Angular Schema, когда я писал это.

Я стал ответственным за проект только через год, потому что он мне уже понравился.

Answer 4

Определенно проверьте Альпака: http://www.alpacajs.org

Рендеринг HTML-форм из схемы JSON с использованием Bootstrap, jQueryUI, jQuery Mobile или прямых веб-элементов управления. Он имеет большую библиотеку элементов управления и все виды отличных функций.

Мы используем его в Cloud CMS (http://www.cloudcms.com) для визуализации некоторых действительно интуитивно понятных интерфейсов.

Сама Альпака имеет лицензию Apache 2.0 и на GitHub (https://github.com/gitana/alpaca).

В следующем выпуске 1.5.0 представлена ​​чистая поддержка Handlebars и пользовательские сборки gulp. Довольно классные вещи.

Answer 5

Могу ли я смиренно предложить Метавиджет ?

Он генерирует HTML-формы из произвольных сложных объектов JSON.Простой пример 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>

Он также поддерживает:

• расширение объекта JSON дополнительными источниками метаданных, такими как схема JSON или метаданные из служб REST
• фреймворки, такие как JQuery UI, JQuery Mobile, AngularJS
• сторонние библиотеки компонентов и средства проверки
• подключаемые макеты

Answer 6

Angular не решает вашу проблему из коробки, поскольку он предполагает, что у вас есть статический html, с которым вы хотите связать некоторые данные.

Сказав, что вы можете использовать угловой для выполнения ваших целей. Вы можете создать новый тег (угловой виджет), который будет принимать объект js и динамически создавать DOM формы вместе со всеми атрибутами угловой проверки. Затем вы компилируете форму с помощью компилятора angular и прикрепляете ее к своей странице. Это приведет к созданию динамически создаваемой формы со всеми существующими функциями проверки углов и привязки данных, работающими так же, как со статическим html.

Я не могу придумать ничего такого, что помешало бы вам сделать это с помощью angular.widget api, но это не тривиальная задача.

Можете ли вы рассказать мне больше о ваших структурах данных? Интересно, было бы недостаточно иметь только набор форм и использовать правильные в нужное время. Зачем вам создание форм полностью динамическим и управляемым данными?

ОБНОВЛЕНИЕ: угловое решение можно найти на https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs

Answer 7

Я использовал JSON Editor Джереми Дорна для различных приложений и всегда был им доволен!Он использует схему JSON и добавляет некоторые параметры для генерации формы (поскольку вы можете иметь различные входные данные для данного типа структуры данных)

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

Answer 8

Проверьте плагин jQuery Templates .
Некоторое время назад я написал небольшую запись в блоге по Связывание данных на стороне клиента с шаблонами jQuery .Мне кажется, это именно то, что вы ищете.

Answer 9

Взгляните на brutusin: json-forms .

Он принимает JSON-схему и исходные данные JSON для заполнения формы.

Answer 10

Выезд InputEx , кажется, именно то, что вы хотите.

Он использует JSON для определения всей формы:

// 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"}
            }
        }
    }
 }
};

(из http://neyric.github.com/inputex/examples/json-schema.html)