4

是否有一个特定的原因，大多数人都将就地编辑实现为显示的“显示”div和隐藏的“编辑”div，当有人像这样点击相关的“编辑”按钮时，它们会打开和关闭？

<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 应用程序和像主干.js 这样的框架，我们似乎可以通过在必要时动态渲染就地编辑表单元素来使我们的代码更加干燥，甚至可能创建一个工厂方法来确定哪个表单元素渲染。例如

  • 一个带有“title”类的 H1 元素被替换为<input type="text" />
  • 具有“year_founded”类的跨度被替换为<input type="number" min="1900" max="2050" />
  • 具有“价格”类的跨度被具有适当掩码的输入替换，仅允许输入价格。

这种渲染所有就地编辑表单元素的做法是否是在服务器端渲染页面时遗留下来的历史遗留问题？

鉴于我们使用 Backbone.js 等客户端 MVC 框架所具有的灵活性和强大功能，是否有理由不使用工厂方法在必要时动态创建和插入表单元素？像这样的东西：

HTML

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

Backbone.js 视图

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>  
<% } %>

其中用户模型上的 allowedToEdit 函数接受模型和属性作为其参数。

4

2 回答 2

0

这是一个有趣的想法。魔鬼在细节中。

虽然您的简单示例很容易即时呈现为可编辑的表单，但在处理其他数据类型时事情很快就会变得棘手。

例如 - 假设我的编辑表单要求用户从select列表中选择一个值。在显示表单上，我可以简单地显示用户的选择，但对于编辑表单，我将需要其他可用选项。我在哪里隐藏它们在显示器上？复选框、单选列表...也存在类似问题

那么，也许我们应该考虑渲染编辑表单，然后从中派生我们的显示视图？

于 2011-12-13T13:58:46.170 回答
0

在 5 个 Backbone 应用程序之后，我有了同样的想法。

当事情很复杂时，您可以使用表单来显示用户数据之间的关系，但在简单的情况下，您只需要input, select, checkboxoverh1或divspan

现在我正在寻找 jQuery 插件，以便在没有 ajax 的情况下进行简单的就地编辑。jQuery 但不是 Backbone，因为我不想在这么小的事情上与 Backbone 紧密结合。

可能会编写我自己的 jQuery + Synapse 插件http://bruth.github.com/synapse/docs/。

用于与模型绑定的 Synapse 和用于输入放置的 jQuery

于 2012-04-21T06:44:45.683 回答