2

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

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

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

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

4

2 回答 2

0

问题是您需要将数据与显示的文本分开。对于您显示的每个数据块，将 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'
};

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

于 2010-07-06T18:32:25.227 回答
0

分离回调的定义并在可编辑的回调中查找所需的回调

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]();
      }
    }
  });
});
于 2010-07-06T18:37:50.377 回答