javascript - 如果以编程方式设置初始值，Dojo InlineEditBox 将在单击时清除

Question

道场 InlineEditBox允许用户单击一段文本，将其变成编辑框并允许编辑文本(然后可以保存或取消更改)。

就我而言，我需要以编程方式覆盖文本框的初始值(实际上是通过 REST 调用)。道场错误(我假设)会导致 InlineEditBox 在您单击它时重置为初始值，并且您将“编辑”一个文本框，其中的文本与您单击之前的文本不同 - 这不是最好的用户体验。 Dojo 似乎在以编程方式设置值之前首次创建 InlineEditBox 时保存该值，然后在该框切换到编辑模式时应用该初始值。

因此，如果我有一个 div，请使用文本“initial”和 id="testDiv"，这在我的 JavaScript 中:

require(["dijit/InlineEditBox", "dijit/form/Textarea", "dojo/domReady!"],
    function(InlineEditBox, Textarea) {
  var editBox = new InlineEditBox({
    editor: Textarea,
    autoSave: false
  }, "testDiv").startup();
  var editText = "Click to edit text...";
  dojo.byId("testDiv").innerHTML = editText; // <-- what can I do instead?
});

然后在正常状态下，该框包含“单击以编辑文本...”，但是当我单击编辑该文本时，我将编辑“初始”文本。

这是一个fiddle demonstrating the problem .

所以我的问题是:如何设置 Dojo InlineEditBox 的“保存值”以覆盖它在创建时保存的初始值？ (在我的例子中，我将 div 留空，并且在编辑模式下会清除该框。)我在控制台中进行了操作，可以看到我可以对框对象执行一系列操作，并且我已经查看了文档，但除了将某些内容分配给其 innerHTML 之外，找不到其他方法来设置该值。

检索我想要设置的值的调用是异步的，因此我无法在创建框时设置它，它必须在创建后立即设置。如果没有其他方法，很高兴考虑从 Dojo 1.7 迁移到更新的版本，但这意味着需要进行相当多的回归测试，所以如果可能的话，我希望它可以与 1.7 一起使用。

Answer 1

这不是一个错误 - 只是小部件使用不当。事实上，文本节点(双击之前)和编辑模式下的文本区域是两个不同的 DOM 元素。如果您分配其中一个的 innerHTML 属性，则第二个属性将保持不变。

不要将文本分配给 innerHTML，而是设置小部件的值:

require([
  "dijit/InlineEditBox", "dijit/form/Textarea", "dojo/domReady!"
], function(InlineEditBox, Textarea) {
  var editBox = new InlineEditBox({
    editor: Textarea,
    autoSave: false
  }, "testDiv");
  editBox.startup();
  var editText = "Click to edit text...";
  editBox.set("value", editText);
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
<div id="testDiv">initial</div>