Существует ли какая-то конкретная причина, по которой большинство пользователей применяют редактирование на месте в виде отображаемого 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" /> - aspan с классом "price" заменяется вводом с соответствующей маской, чтобы разрешить ввод только цен.
Это практика, при которой все элементы формы редактирования на месте являются историческим наследием, оставшимся откогда страницы отображались на стороне сервера?
Учитывая гибкость и мощь, которые мы имеем в клиентских инфраструктурах 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 в модели пользователя принимает модель и атрибутв качестве аргументов.