Javascript 为什么就地编辑表单与显示版本一起呈现，而不是动态呈现？

是否有一个特定的原因，大多数人都将“编辑”就地实现为显示的“显示”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>

其中editInPlaceForm是一个工厂，它根据标记名返回适当的在位编辑表单元素类型。此factory视图还控制其自身的所有逻辑，用于保存编辑、取消编辑、向服务器发出请求以及重新提交用.html（）函数替换的适当原始元素

在我看来，如果我们使用这种方法，那么我们还可以根据用户的编辑权限动态呈现

按钮，如下所示：

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

---

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

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

虽然您的简单示例可以轻松地动态呈现为可编辑表单，但在处理其他数据类型时，事情很快就会变得棘手

例如，假设我的编辑表单要求用户从

select

列表中选择一个值。在显示表单上，我可以简单地显示用户的选择，但是对于编辑表单，我需要其他可用的选择。我应该将它们隐藏在显示屏上的什么位置？复选框、无线电列表也存在类似问题

---

这样，也许我们应该考虑渲染编辑表单，然后从中导出我们的显示视图？ 在5个主干应用程序之后，我有了相同的想法

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

输入

，

选择

，

复选框

在

h1

，

div

或

span

现在我正在搜索jQuery插件，以便在没有ajax的情况下进行简单的就地编辑。 jQuery而不是主干网，因为我不想为这么小的事情与主干网紧密耦合

可能会编写我自己的jQuery+Synapse插件

---

Synapse用于绑定模型，jQuery用于输入放置

不确定问题在哪里。对于你提出的例子，我不知道有什么“最佳”解决方案。在我看来这两个都不错。您提到的唯一一件事就是让javascript处理应用程序中的权限。JS可以很容易地使用，所以请确保您的后端加倍检查所有客户端更改。@Julien是的，我们计划在服务器端加倍检查所有内容。客户端的所有特权处理都是针对可用性和用户体验问题。我不想在页面上呈现任何用户无法使用的元素。e、 如果他们没有编辑权限，那么他们应该能够看到编辑按钮。我的问题是，为什么默认情况下在页面上呈现“display”和“edit”div，而不是在需要时使用工厂构建必要的就地编辑表单？我很想知道，作为一个正在考虑为我的应用程序使用主干的人。。。在我看来，你的方式是有道理的，尽管我对“工厂”有点困惑。这是为了减少“对于此显示视图，渲染此命名编辑视图”，所以你可以说，“此显示视图是单行文本，工厂请给我一个单行编辑视图”？

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)
},

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