Question

我最终使用nw.js创建一个IDE，因此内容和文件名将来自个人电脑，但这个小提琴复制了我所拥有的信息。如果您打开一个标签，然后使用＆＃39; x＆＃39;按钮并检查你的控制台，你会发现它找不到编辑器元素，但是如果你挖掘DOM，你会在那里看到它。知道为什么删除标签会爆炸吗？我试图找出当用户想要关闭文件时如何清理的东西。

http://jsfiddle.net/2Lu35rqm/

$.fn.addEditorTab = function (name, tabName, contents) {
    $('ul', this).append('<li><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
    $(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
    $(this).tabs("refresh");

    var editor = ace.edit("editor-" + name);
    editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    editor.getSession().setValue(contents);

    return editor;
};

$(function(){
    var tabs = $("#tabs").tabs();
  var editors = {};

  var file1Path = "D:/Test/file1.js";
  var file1Name = "file1.js";
  var file1Contents = "function foo(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  var file2Path = "D:/Test/file2.js";
  var file2Name = "file2.js";
    var file2Contents = "function bar(items) { \r   var x = \"All this is syntax highlighted\";\r   return x;\r}";

  editors[file1Path] = tabs.addEditorTab(file1Path, file1Name, file1Contents);
  editors[file2Path] = tabs.addEditorTab(file2Path, file2Name, file2Contents);

  tabs.on("click", "span.ui-icon-close", function() {
      var panelId = $(this).closest("li").remove().attr("aria-controls");
      var editorId = panelId.replace("tab-", "editor-");

      console.log("A");
      $("#" + editorId).remove();

      console.log("B");
      $("#" + panelId).remove();

      console.log("C");
      editors[editorId.replace("-editor", "")].destroy();

      console.log("D");
      tabs.tabs("refresh");
    });
});

Answer 1

问题是选择器：$("#tab-D:/Test/file1.js")＆amp; $("#editor-D:/Test/file1.js")。将它们切换到不同的选择器有帮助。

要使用任何元字符（例如!"#$%&'()*+,./:;<=>?@[\]^{|}~）作为名称的文字部分，必须使用两个反斜杠进行转义：\\。例如，具有id="foo.bar"的元素可以使用选择器$("#foo\\.bar")。 W3C CSS规范包含完整的rules regarding valid CSS selectors集。同样有用的是Mathias Bynens在CSS character escape sequences for identifiers上的博客文章。

工作示例：http://jsfiddle.net/Twisty/pp5ssbLn/

<强>的JavaScript

$.fn.addEditorTab = function(name, tabName, contents) {
  $('ul', this).append('<li><a href="#tab-' + name + '">' + tabName + '</a><span class="ui-icon ui-icon-close" role="presentation"></li>');
  $(this).append("<div id='tab-" + name + "'><div id='editor-" + name + "' class='editor'></div></div>");
  $(this).tabs("refresh");

  var editor = ace.edit("editor-" + name);
  editor.setTheme("ace/theme/monokai");
  editor.getSession().setMode("ace/mode/javascript");
  editor.getSession().setValue(contents);

  return editor;
};

$(function() {
  var tabs = $("#tabs").tabs();
  var editors = {};

  var file1Path = "D:/Test/file1.js";
  var file1Name = "file1.js";
  var file1Contents = "function foo(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  var file2Path = "D:/Test/file2.js";
  var file2Name = "file2.js";
  var file2Contents = "function bar(items) { \r var x = \"All this is syntax highlighted\";\r   return x;\r}";

  editors[file1Path] = tabs.addEditorTab(file1Path, file1Name, file1Contents);
  editors[file2Path] = tabs.addEditorTab(file2Path, file2Name, file2Contents);

  tabs.on("click", "span.ui-icon-close", function() {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    var editorId = panelId.replace("tab-", "editor-");

    console.log("A, Editor: " + editorId);
    $("div[id='" + editorId + "']").remove();

    console.log("B, Panel: " + panelId);
    $("div[id='" + panelId + "']").remove();

    console.log("C");
    editors[editorId.replace("editor-", "")].destroy();

    console.log("D");
    tabs.tabs("refresh");
  });
});

还应用了editors[editorId.replace("-editor", "")].destroy();

的修复程序

希望有所帮助。

删除选项卡中的多个ace编辑器

1 个答案: