Почему формы редактирования на месте отображаются вместе с отображаемой версией, а не на лету?

Question

Существует ли какая-то конкретная причина, по которой большинство пользователей реализует редактирование на месте в виде отображаемого div "display" и скрытого div "edit", которые включаются и выключаются, когда кто-то нажимает на соответствующую кнопку "edit", как это происходит?

<div id="title">
  <div class="display">
    <h1>
      My Title
    </h1>
  </div>
  <div class="edit">
    <input type="text" value="My Title" />
    <span class="save_edit_button"></span>
    <a href="#" class="cancel_edit">Cancel</a>
  </div>
</div>

Куда бы я ни посмотрел, я вижу, что редактирование на месте происходит в основном так. Этот подход, безусловно, имеет смысл, когда вы отображаете все представления на стороне сервера и доставляете их клиенту. Однако с чистыми AJAX-приложениями и фреймворками, такими как backbone.js, кажется, что мы могли бы сделать наш код более СУХИМЫМ, визуализируя элементы формы на месте на лету по мере необходимости, возможно, даже создавая фабричный метод, который определяет, какой элемент формы оказывать. например

• элемент H1 с классом "title" заменяется на <input type="text" />
• промежуток с классом "year_founded" заменяется на <input type="number" min="1900" max="2050" />
• промежуток с классом "цена" заменяется вводом с соответствующей маской, чтобы разрешить ввод только цен.

Является ли эта практика рендеринга всех элементов формы редактирования на месте историческим наследием, когда страницы отображались на стороне сервера?

Учитывая гибкость и мощь, которую мы имеем с клиентскими MVC-фреймворками, такими как Backbone.js, есть ли причина не создавать и вставлять элементы формы на лету, когда это необходимо, с помощью заводского метода? Что-то вроде этого:

HTML

<div id="description">
  Lorem ipsum dolar set amit...
</div>
<span class="edit_button"></span>

Backbone.js View

events: {
  "click .edit_button": "renderEditInPlaceForm",
},

renderEditInPlaceForm: function:(e) {
  var el = $(e.currentTarget).previous();
  var id = el.attr('id');
  var value = el.text();
  var tagName = el.tagName();
  var view  = new editInPlaceForm({   
    id: id,
    type: tagName,
    value: value
  });
  $("#id").html(view.render().el)
},

Где editInPlaceForm - это фабрика, которая возвращает соответствующий тип элемента формы редактирования на месте на основе tagName. Это фабричное представление также контролирует всю свою собственную логику для сохранения редактирования, отмены редактирования, отправки запросов на сервер и повторной визуализации соответствующего исходного элемента, который был заменен функцией.html()?

Мне кажется, что если мы используем этот подход, то мы могли бы также сделать <span class="edit_button"></span> кнопки на лету, основанные на правах редактирования пользователя, например, так:

<h1 id="title">
  <%= document.get("title") %>
</h1>
<% if (user.allowedToEdit( document, title )) { %>
  <span class="edit_glyph"></span>  
<% } %>

где функция allowToEdit в пользовательской модели принимает модель и атрибут в качестве аргументов.

Answer 1

После 5 приложений Backbone я пришел к тем же мыслям.

Когда все сложно, у вас есть формы для отображения отношений между пользовательскими данными, но в простых случаях вам просто нужно input, select, checkbox над h1, div или же span

Сейчас я ищу плагин jQuery для простого редактирования на месте без ajax. JQuery, но не Backbone, потому что я не хочу быть тесно связан с Backbone для такой маленькой вещи.

Скорее всего, мой собственный плагин jQuery + Synapse http://bruth.github.com/synapse/docs/.

Синапс для связывания с моделью и jQuery для размещения ввода

Answer 2

Это интересная идея. Дьявол кроется в деталях.

Хотя ваш простой пример легко визуализируется как редактируемая форма на лету, при работе с другими типами данных все становится сложнее.

Например - предположим, что моя форма редактирования требует, чтобы пользователь выбрал значение из select список. В форме отображения я могу просто отобразить выбор пользователя, но для формы редактирования мне понадобятся другие доступные варианты. Где я могу спрятать их на дисплее? Подобные проблемы существуют для флажков, списков радиостанций...

Итак, возможно, нам следует рассмотреть рендеринг формы редактирования, а затем извлечь из этого наш экранный вид?