Question

是否有一个特定的原因，大多数人都实现了就地编辑作为显示的“显示”div和隐藏的“编辑”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应用程序和backbone.js这样的框架，似乎我们可以根据需要动态渲染就地编辑表单元素，使我们的代码更加干燥，甚至可以创建一个确定哪个表单元素的工厂方法渲染。 e.g。

具有“title”类的H1元素被<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查看

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函数接受模型和属性作为其参数。

Answer 1

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

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

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

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

Answer 2

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

当事情变得复杂时，您可以使用表单来显示用户数据之间的关系，但在简单的情况下，您只需要input，select，checkbox超过h1，div或span

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

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

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

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

2 个答案: