Как создать веб-приложение, похожее на Wufoo (построитель форм), с помощью JQuery и Rails? - PullRequest
15 голосов
/ 20 января 2011

Я ищу руководство по реализации Wufoo-подобного компоновщика в приложении Rails 3 с JQuery на стороне клиента.По сути, пользователь может создать что-то (форма в случае Wufoo) в режиме «офлайн», а затем сохранить все пользовательские изменения на сервере в одном пакете, нажав кнопку «Сохранить» или аналогичную (например, автоматическое сохранение может быть вызванобраузер каждые 30 с или около того).

Сейчас я склоняюсь к использованию локального хранилища HTML5.«Конструктор» по существу будет хранить пользовательские изменения локально в локальном хранилище браузера в формате JSON.Нажатие на кнопку Сохранить затем HTTP отправит содержимое локального хранилища в приложение Rails, снова в формате JSON.Звучит ли это правильно?Любые советы, предложения?

Некоторые дополнительные соображения / вопросы:

  • А как насчет старых браузеров, которые не поддерживают HTML5?Должен ли быть запасной план, который использует хранилище cookie?
  • Любой плагин JQuery, который может помочь с этим?например, абстрактное локальное хранилище HTML5 в качестве основного хранилища и хранилище файлов cookie в качестве вторичного / резервного хранилища.
  • Любые специфичные для Rails соображения, о которых следует помнить?

Примечание. Следующий вопрос касается формы WYSIWYGСтроитель конкретно и не дает какого-либо хорошего решения. Создание WYSIWYG-конструктора форм (как у Wufoo) в Rails

Спасибо!

Ответы [ 2 ]

4 голосов
/ 23 января 2011

Вот дизайн, который я в итоге реализовал.Я далек от полного решения, но думаю, что это хорошее начало.

Модель данных

В моем случае пользователи должны иметь возможность составить списокзадачи, где задачи могут иметь разные типы и, следовательно, атрибуты.Задачи также могут вставлять дополнительные объекты.В некотором смысле похож на построитель форм, хотя я имею дело с более глубокой иерархией вложенных объектов.Ключевым моментом здесь является обеспечение того, чтобы ваше фоновое приложение предоставляло только объекты, относящиеся к домену вашего приложения (в смысле Domain Driven Design ), чтобы ваш клиентский код не занимал время на рефакторинг.данные после десериализации их с сервера и до их сериализации при подготовке к сохранению.В связи с этим мне пришлось внести несколько изменений в свой уровень представления на стороне сервера, но в результате я думаю, что мой код на стороне клиента стал чище и больше ориентирован на обработку реальных пользовательских событий.

Сериализация данных

Я выбрал JSON в качестве формата обмена данными.На стороне клиента у меня есть две функции, которые обрабатывают сериализацию и десериализацию данных.Реализация довольно проста (отчасти благодаря некоторым изменениям, которые я сделал, чтобы показать объекты модели предметной области).Я вставил упрощенную версию ниже.Единственная проблема заключалась в том, что параметр _method, используемый Rails для обработки запросов PUT, похоже, не работает с JSON Content-Type.См. Использование HTTP PUT для отправки JSON с Jquery и Rails. 3

var todoList = {};

$.getJSON("/users/123/todolists/456.json", function(data) {
  loadTodoList(data);
  ...
});

function loadTodoList(data) {
  todoList = data.todoList;
}

function saveTodoList() {
  $.ajax({
    type: 'POST',
    url: "/users/123/todolists/456",
    data: JSON.stringify({ todoList: todoList }),
    contentType: 'application/json',
    dataType: 'script', // could be "json", "html" too
    beforeSend: function(xhr){
      xhr.setRequestHeader("X-Http-Method-Override", "put");
    }
  });
}

На стороне сервера Rails также упрощает обработку JSON (сериализация и десериализация JSON выполняется автоматическии прозрачно по рамкам).Я просто переопределил метод to_json () в моей модели TodoList, чтобы избежать передачи туда-сюда бесполезных данных (например, атрибутов create_at ,ified_atified).Также нужно было обязательно включить все вложенные объекты при извлечении моего объекта верхнего уровня (т.е. TodoList).

  # TodoListsController
  def show
    @todolist = TodoList.find_by_id(params[:id], :include => [:tasks, ...])
    respond_to do |format|
      format.json do
        render :json => @todolist.to_json
      end
    end
  end

  # TodoList model
  def to_json
    super(:only => :name,
          :include => { :tasks => { :only => [:name, :description, ...],
                                    :include => ... }})
  end

Постоянство на стороне клиента

Цель здесьчтобы избежать случайной потери пользовательских изменений, которые не были сохранены.До сих пор я напрямую использую локальное хранилище HTML5 (переменная localStorage), но в конечном итоге буду искать плагин jQuery, который автоматически обрабатывает откат на хранилище cookie, если HTML5 не поддерживается.

Динамическое генерирование HTML

Я использую jQuery Template для создания HTML.Основная функция компоновщика - динамически генерировать HTML, поэтому этот плагин очень удобен.Я определил шаблоны для всех строительных блоков моей модели списка задач (например, задачи, заметки, ...).Шаблоны вызываются всякий раз, когда создаются новые экземпляры этих объектов и их необходимо визуализировать.

Я думаю, что это закладывает большую часть основы.Остальное в основном хардкорный Javascript для обработки всех взаимодействий пользователей с конструктором форм / todoList.

4 голосов
/ 23 января 2011

Я немного поиграл с этим на работе, и я думаю, что это может дать вам преимущество в построителе форм jquery, который знает, как сериализовать и десериализовать себя.Я думаю, что он сериализует форму в строку, а не в JSON, но это только начало.http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/

Поиск в Google нашел меня sites.google.com/site/daveschindler/jquery-html5-storage-plugin, в котором говорится, что он хранит вещи в хранилище HTML 5 с откатом на файлы cookie, если браузер это делаетне поддерживается.

Еще одна мысль: если цель использования локального хранилища состоит в том, чтобы пользователи не потеряли работу, которую они еще не хотят публиковать, другой вариант может заключаться в реализации отдельных «сохранения» и «публикации».кнопки, чтобы вы по-прежнему сохраняли работу пользователя на сервере, но позволяли им сохранять «черновики» до тех пор, пока они не будут готовы к публикации, и таким образом не будет иметь значения, какой браузер или ПК они используют.

Надеюсьэто помогает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...