Javascript goJS下拉列表删除项目

我有一个简单的python flask goJS图形应用程序，如下所示：

节点和链接文本的源是从应用程序的后端加载的，我在

模型中设置了它们

var graphDataString = JSON.parse('{{ diagramData | tojson | safe}}');
myDiagram.model = go.Model.fromJson(graphDataString);
myDiagram.model.set(myDiagram.model.modelData, "linkchoices", JSON.parse('{{ link_choices | tojson | safe}}'));
myDiagram.model.set(myDiagram.model.modelData, "nodechoices", JSON.parse('{{ node_choices | tojson | safe}}'));
console.log("whole model");
console.log(myDiagram.model.modelData);

所有这些都可以很好地加载到modelData中，我可以将其写入控制台而不会出现问题：


我的问题是，它没有显示在我的节点和链接下拉列表中，我不知道为什么

这是我的节点模板：

myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        // define the node's outer shape, which will surround the TextBlock
        $(go.Shape, "RoundedRectangle",
          {
            parameter1: 20,  // the corner has a large radius
            fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
            stroke: null,
            portId: "",  // this Shape is the Node's port, not the whole Node
            fromLinkable: true, fromLinkableDuplicates: true,
            toLinkable: true, toLinkableDuplicates: true,
            cursor: "pointer"
          }),
        $(go.TextBlock,
          {
            font: "bold 11pt helvetica, bold arial, sans-serif",
            editable: true,  // editing the text automatically updates the model data
            //textEditor: window.TextEditorRadioButtons, // defined in textEditorRadioButtons.js
              // this specific TextBlock has its own choices:
              textEditor: window.TextEditorSelectBox, // defined in extensions/textEditorSelectBox.js
              textEdited: function(tb, oldstr, newstr) {
                var currentNodeChoices = tb.diagram.model.modelData.nodechoices;
                console.log("currentNodeChoices");
                console.log(currentNodeChoices);
                console.log("newstr");
                console.log(newstr);
                console.log("oldstr");
                console.log(oldstr);
                var idx = currentNodeChoices.indexOf(newstr);
                if (idx >= 0 && oldstr !== newstr) {
                  console.log("removing choice " + idx + ": " + newstr);
                  var newNodeChoices = Array.prototype.slice.call(currentNodeChoices);
                  newNodeChoices.splice(idx, 1);
                  tb.diagram.model.set(tb.diagram.model.modelData, "nodechoices", newNodeChoices);
                }
              }
          },
        new go.Binding("text").makeTwoWay(),
        new go.Binding("nodechoices").ofModel())
    ); 

这是我的链接模板：

myDiagram.linkTemplate =
      $(go.Link,  // the whole link panel
        {
          curve: go.Link.Bezier, 
          adjusting: go.Link.Stretch,
          reshapable: true, 
          relinkableFrom: true, 
          relinkableTo: true,
          toShortLength: 3
        },
        new go.Binding("points").makeTwoWay(),
        new go.Binding("curviness"),
        $(go.Shape,  // the link shape
          { strokeWidth: 1.5 }),
        $(go.Shape,  // the arrowhead
          { toArrow: "standard", stroke: null }),
        $(go.Panel, "Auto",
          $(go.Shape,  // the label background, which becomes transparent around the edges
          {
              fill: $(go.Brush, "Radial", { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
                stroke: null
            }),
            $(go.TextBlock,
            {
              background: "white",
              editable: true,
              textEditor: window.TextEditorSelectBox, // defined in extensions/textEditorSelectBox.js
              textEdited: function(tb, oldstr, newstr) {
                var currentLinkChoices = tb.diagram.model.modelData.linkchoices;
                console.log("currentLinkChoices");
                console.log(currentLinkChoices);
                console.log("newstr");
                console.log(newstr);
                console.log("oldstr");
                console.log(oldstr);
                var idx = currentLinkChoices.indexOf(newstr);
                if (idx >= 0 && oldstr !== newstr) {
                  console.log("removing choice " + idx + ": " + newstr);
                  var newLinkChoices = Array.prototype.slice.call(currentLinkChoices);
                  newLinkChoices.splice(idx, 1);
                  tb.diagram.model.set(tb.diagram.model.modelData, "linkchoices", newLinkChoices);
                }
              }
            },
            new go.Binding("text").makeTwoWay(),
            new go.Binding("linkchoices").ofModel())
        )
    );

我想实现这个行为：用户可以添加新的节点和链接，但用户只能从下拉列表中选择链接和节点的可用选项。添加新节点和链接很好，我没有任何问题。我想这样做，当用户为节点使用一个选项时，该选项将不再可用，直到他删除该节点或将其更改为其他选项

例如，他使用“node_choice_1”，他不能再在任何其他节点上使用它，除非他更改该节点上的选项或删除该节点。链接也是如此。
因此，我在图表定义中添加了以下代码：

myDiagram =
    $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
    {
      // start everything in the middle of the viewport
      initialContentAlignment: go.Spot.Center,
      // have mouse wheel events zoom in and out instead of scroll up and down
      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
      // support double-click in background creating a new node
      "clickCreatingTool.archetypeNodeData": { text: "new node" },
      // enable undo & redo
      "textEditingTool.defaultTextEditor": window.TextEditorSelectBox,
      "undoManager.isEnabled": true,
      "layout": new go.ForceDirectedLayout(),
      "ModelChanged": function(e) {
        console.log("Diagram model changed!");
              if (e.change === go.ChangedEvent.Remove && e.modelChange === "linkDataArray") {
                console.log("eee");
                console.log(e);
                var linkdata = e.oldValue;
                console.log("linkdata");
                console.log(linkdata);
                var oldstr = linkdata.text;
                console.log("oldstr");
                console.log(oldstr);

                if (!oldstr) return;
                var currentLinkChoices = e.model.modelData.linkchoices;
                console.log("currentLinkChoices");
                console.log(currentLinkChoices);
                var idx = currentLinkChoices.indexOf(oldstr);
                if (idx < 0) {
                  console.log("adding choice: " + oldstr);
                  var newLinkChoices = Array.prototype.slice.call(currentLinkChoices);
                  newLinkChoices.push(oldstr);
                  e.model.set(e.model.modelData, "linkchoices", newLinkChoices);
                }
              }
              else if(e.change === go.ChangedEvent.Remove && e.modelChange === "nodeDataArray"){
                console.log("eee");
                console.log(e);
                var nodedata = e.oldValue;
                console.log("nodedata");
                console.log(nodedata);
                var oldstr = nodedata.text;
                console.log("oldstr");
                console.log(oldstr);

                if (!oldstr) return;
                var currentNodeChoices = e.model.modelData.nodechoices;
                console.log("currentNodeChoices");
                console.log(currentNodeChoices);
                var idx = currentNodeChoices.indexOf(oldstr);
                if (idx < 0) {
                  console.log("adding choice: " + oldstr);
                  var newNodeChoices = Array.prototype.slice.call(currentNodeChoices);
                  newNodeChoices.push(oldstr);
                  e.model.set(e.model.modelData, "nodechoices", newNodeChoices);
                }

              }
            }
    });

myDiagram=
$（go.Diagram，“myDiagramDiv”，//必须命名或引用DIV HTML元素
{
/在视口中间启动一切
initialContentAlignment:go.Spot.Center，
//让鼠标滚轮事件放大和缩小，而不是上下滚动
“toolManager.mouseWheelBehavior”：go.toolManager.WheelZoom，
//支持在后台双击创建新节点
“clickCreatingTool.archetypeNodeData:{text:“新节点”}，
//启用撤消和重做
“textEditingTool.defaultTextEditor”：window.TextEditorSelectBox，
“undoManager.isEnabled”：正确，
“布局”：新建go.ForceDirectedLayout（），
“模型更改”：功能（e）{
log（“图表模型已更改！”）；
if（e.change===go.ChangedEvent.Remove&&e.modelChange===“linkDataArray”）{
控制台日志（“eee”）；
控制台日志（e）；
var linkdata=e.oldValue；
控制台日志（“链接数据”）；
console.log（linkdata）；
var oldstr=linkdata.text；
console.log（“oldstr”）；
console.log（oldstr）；
如果（！oldstr）返回；
var currentLinkChoices=e.model.modelData.linkchoices；
console.log（“currentLinkChoices”）；
console.log（currentLinkChoices）；
var idx=currentLinkChoices.indexOf（oldstr）；
if（idx<0）{
log（“添加选项：+oldstr”）；
var newLinkChoices=Array.prototype.slice.call（currentLinkChoices）；
newLinkChoices.push（oldstr）；
e、 model.set（例如model.modelData，“linkchoices”，newLinkChoices）；
}
}
else if（e.change===go.ChangedEvent.Remove&&e.modelChange===“nodeDataArray”）{
控制台日志（“eee”）；
控制台日志（e）；
var nodedata=e.oldValue；
控制台日志（“nodedata”）；
console.log（nodedata）；
var oldstr=nodedata.text；
console.log（“oldstr”）；
console.log（oldstr）；
如果（！oldstr）返回；
var currentNodeEchoices=e.model.modelData.NodeEchoices；
console.log（“currentNodeEchoices”）；
console.log（currentNodeEchoices）；
var idx=currentNodeEchoices.indexOf（oldstr）；
if（idx<0）{
log（“添加选项：+oldstr”）；
var newNodeChoices=Array.prototype.slice.call（currentNodeChoices）；
newNodeChoices.push（oldstr）；
e、 model.set（例如model.modelData，“nodechoices”，newNodeChoices）；
}
}
}
});

此外，当节点没有更多可用的节点选项时，用户无法添加更多节点。链接也是如此

我真的很绝望，因为我正试图让这件简单的事情运作起来，我被困在原地好几天了。我试图阅读文档，但没有发现任何有用的东西，有这么多文档化的案例，但没有我需要的示例。任何帮助都将不胜感激。
对于链接，我之前似乎已经回答了这个问题，所以我采用了相同的代码，并将其全部复制到节点。我确实改进了
textdedited
事件处理程序来处理撤销/重做，尽管调用
console.log
显然会更加冗长

function init() {
  var $ = go.GraphObject.make;

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        initialContentAlignment: go.Spot.Center,
        "undoManager.isEnabled": true,
        "ModelChanged": function(e) {     // just for demonstration purposes,
          if (e.isTransactionFinished) {  // show the model data in the page's TextArea
            document.getElementById("mySavedModel").textContent = e.model.toJson();
          }
          if (e.change === go.ChangedEvent.Remove) {
            if (e.modelChange === "linkDataArray") {
              var linkdata = e.oldValue;
              var oldstr = linkdata.text;
              if (!oldstr) return;
              var linkchoices = e.model.modelData.linkchoices;
              var idx = linkchoices.indexOf(oldstr);
              if (idx < 0) {
                console.log("deletion adding link choice: " + oldstr);
                var newlinkchoices = Array.prototype.slice.call(linkchoices);
                newlinkchoices.push(oldstr);
                e.model.set(e.model.modelData, "linkchoices", newlinkchoices);
              }
            } else if (e.modelChange === "nodeDataArray") {
              var nodedata = e.oldValue;
              var oldstr = nodedata.text;
              if (!oldstr) return;
              var nodechoices = e.model.modelData.nodechoices;
              var idx = nodechoices.indexOf(oldstr);
              if (idx < 0) {
                console.log("deletion adding node choice: " + oldstr);
                var newnodechoices = Array.prototype.slice.call(nodechoices);
                newnodechoices.push(oldstr);
                e.model.set(e.model.modelData, "nodechoices", newnodechoices);
              }
            }
          }
        }
      });

  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        {
          margin: 8,
          editable: true,
          textEditor: window.TextEditorSelectBox, // defined in extensions/textEditorSelectBox.js
          textEdited: function(tb, oldstr, newstr) {
            if (oldstr !== newstr) {
              console.log("changing from " + oldstr + " to " + newstr);
              var model = tb.diagram.model;
              var nodechoices = model.modelData.nodechoices;
              if (!nodechoices) {
                nodechoices = [];
                model.set(model.modelData, "nodechoices", nodechoices);
              }
              var idx = nodechoices.indexOf(newstr);
              if (idx >= 0) {
                console.log("removing node choice " + idx + ": " + newstr);
                model.removeArrayItem(nodechoices, idx);
              }
              if (oldstr) {
                console.log("  adding node choice " + oldstr);
                model.addArrayItem(nodechoices, oldstr);
              }
            }
          }
        },
        new go.Binding("text").makeTwoWay(),
        new go.Binding("choices", "nodechoices").ofModel())
    );

  myDiagram.linkTemplate =
    $(go.Link,
      $(go.Shape),
      $(go.Shape, { toArrow: "OpenTriangle" }),
      $(go.TextBlock,
        {
          background: "white",
          editable: true,
          textEditor: window.TextEditorSelectBox, // defined in extensions/textEditorSelectBox.js
          textEdited: function(tb, oldstr, newstr) {
            if (oldstr !== newstr) {
              console.log("changing from " + oldstr + " to " + newstr);
              var model = tb.diagram.model;
              var linkchoices = model.modelData.linkchoices;
              if (!linkchoices) {
                linkchoices = [];
                model.set(model.modelData, "linkchoices", linkchoices);
              }
              var idx = linkchoices.indexOf(newstr);
              if (idx >= 0) {
                console.log("removing link choice " + idx + ": " + newstr);
                model.removeArrayItem(linkchoices, idx);
              }
              if (oldstr) {
                console.log("  adding link choice " + oldstr);
                model.addArrayItem(linkchoices, oldstr);
              }
            }
          }
        },
        new go.Binding("text").makeTwoWay(),
        new go.Binding("choices", "linkchoices").ofModel())
    );

  myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue" },
    { key: 2, text: "Beta", color: "orange" },
    { key: 3, text: "Gamma", color: "lightgreen" },
    { key: 4, text: "Delta", color: "pink" }
  ],
  [
    { from: 1, to: 2, text: "one" },
    { from: 1, to: 3, text: "two" },
    { from: 3, to: 4, text: "three" }
  ]);
  myDiagram.model.set(myDiagram.model.modelData, "nodechoices", ["Epsilon"]);
  myDiagram.model.set(myDiagram.model.modelData, "linkchoices", ["four"]);
}

函数init（）{
var$=go.GraphObject.make；
我的图表=
$（go.Diagram，“myDiagramDiv”，
{
initialContentAlignment:go.Spot.Center，
“undoManager.isEnabled”：正确，
“ModelChanged”：函数（e）{//仅用于演示目的，
如果（e.isTransactionFinished）{//在页面的文本区域中显示模型数据
document.getElementById（“mySavedModel”）.textContent=e.model.toJson（）；
}
if（e.change===go.ChangedEvent.Remove）{
如果（如modelChange==“linkDataArray”）{
var linkdata=e.oldValue；
var oldstr=linkdata.text；
如果（！oldstr）返回；
var linkchoices=e.model.modelData.linkchoices；
var idx=linkchoices.indexOf（oldstr）；
if（idx<0）{
log（“删除添加链接选项：+oldstr”）；
var newlinkchoices=Array.prototype.slice.call（linkchoices）；
newlinkchoices.push（oldstr）；
e、 model.set（例如model.modelData，“linkchoices”，newlinkchoices）；
}
}else if（例如modelChange==“nodeDataArray”）{
var nodedata=e.oldValue；
var oldstr=nodedata.text；
如果（！oldstr）返回；
var nodechoices=e.model.modelData.nodechoices；