使用 JavaScript/JQuery 创建多字段就地编辑器答案

【问题标题】：Creating multi-field in-place editor with JavaScript/JQuery使用 JavaScript/JQuery 创建多字段就地编辑器
【发布时间】：2010-07-06 18:05:57
【问题描述】：

我正在寻找一种在 JavaScript 中创建就地编辑器的方法，例如 JEditable 或类似的插件。但是，不同之处在于我的编辑器将是一个多字段表单，而不是单个字段。

由于相同的表单将用于不同的部分，即编辑现有项目和创建新项目，我希望能够为每个案例指定回调函数，而不必复制共享功能（例如验证、取消按钮等）。

目前我尝试天真地实现它，代码看起来很糟糕，因为事件处理程序分散在源代码周围，而不是作为一个组件在一起。

所以我的问题是推荐的实现方式是什么？如果有提供该功能的 jQuery 插件，那可能是最简单的方法。否则，我将如何正确构建我的代码？

【问题讨论】：

标签： javascript jquery design-patterns edit-in-place

【解决方案1】：

分离你的回调的定义，并在可编辑的回调中查找你想要的回调

var callbacks = {  // define your callbacks here
  'field1': function() {
    alert("You editted field1");
  },
  'field2': function() {
    alert("You editted field2");
  }
}

$("input").each(function(i, o) {
  $(o).editable('save.php', {
    'callback': function(value, settings) {
       // do validation etc.

       // then call field-specific callback
      if(callbacks[o.name]) {  // I'm using 'name', but you could also use 'id' or something else
         callbacks[o.name]();
      }
    }
  });
});

【讨论】：

就我而言，我只想为表单提交按钮进行回调，而不是为每个字段。整个表单应该是显示/隐藏/提交/取消作为一个整体。

【解决方案2】：

问题是您需要将数据与显示的文本分开。对于您显示的每个数据块，将 json dict（写入页面或使用 ajax 提取）与表单中每个字段的文本相关联。

例如，如果您使用名称（名字、中间名、姓氏），则显示的名称如下：

<span class="editable">Colin M. Hansen</span>

然后你写这样的表格：

<form class="nameform" style="display: none;">
     <input class="first" type="text">
     <input class="mi" type="text">
     <input class="last" type="text">
</form>

你有一个这样的字典，映射到表单中的输入：

name1 = {
    first: 'Colin',
    mi: 'M',
    last: 'Hansen'
};

您编写的通用代码为span 元素的onclick 上的文本切换表单，并用字典中的数据填充每个输入字段。提交代码将新数据保存到name1和服务器，并返回新的显示文本。

【讨论】：