Arrays 面板中的按钮，带有；itemArray"；不显示绑定
我想在左面板中显示按钮的下拉列表，一个按钮对应一个“需要”。 稍后，用户将能够向列表中添加新的“需要”按钮。 我使用带有“itemArray”绑定的面板。 但当出现以下语句时，按钮不会显示：addNeed（“我的新需求”）；被执行。 我查看了“dynamicPorts”示例，但我不明白为什么它不起作用Arrays 面板中的按钮，带有；itemArray"；不显示绑定,arrays,button,drop-down-menu,gojs,Arrays,Button,Drop Down Menu,Gojs,我想在左面板中显示按钮的下拉列表，一个按钮对应一个“需要”。 稍后，用户将能够向列表中添加新的“需要”按钮。 我使用带有“itemArray”绑定的面板。 但当出现以下语句时，按钮不会显示：addNeed（“我的新需求”）；被执行。 我查看了“dynamicPorts”示例，但我不明白为什么它不起作用 <!DOCTYPE html> <html> <head> <meta name="minimumCode" content="width=devic
<!DOCTYPE html>
<html>
<head>
<meta name="minimumCode" content="width=device-width, initial-scale=1">
<title>minimumCode</title>
<meta name="description" content="Iso prototype Leon Levy" />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<span id="diagramEventsMsg" style="color: red"></span>
<script id="code">
var ellipseStrokeWidth=3;
var ellipseWidth = 80;
var ellipseHeight = 25;
var myFont = "16px sans-serif";
var myFontMedium = "23px sans-serif";
var myFontLarge = "30px sans-serif";
var needWidth = 170;
var needHeight = 20;
var needStrokeWidth = 0;
var needColor = 'purple';
var portSize = new go.Size(8, 8);
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
myBannerNeeds =
$(go.Diagram, "myBannerNeedsDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position
})}
);
myBannerNeeds.nodeTemplate =
$(go.Node,
$(go.Panel, "Vertical", //needs list buttons
{ alignment: new go.Spot(0, 0), row: 0, column: 0},
new go.Binding("itemArray", "needsDataArray"),
{ itemTemplate:
$(go.Panel,
$(go.Shape, "Rectangle",
{ stroke: "red", strokeWidth: 2,
height: 30, width: 30}
),
$(go.TextBlock, { text: "...", stroke: "gray" },
new go.Binding("text", "key"))
) // end itemTemplate
}
) // end Vertical Panel
);
// Add a button to the needs panel.
function addNeed(newNeedName) {
myDiagram.startTransaction("addNeed");
var button = $('Button',
$(go.Shape, "Rectangle",
{ width: needWidth, height: needHeight, margin: 4, fill: "white",
stroke: "rgb(227, 18, 18)", strokeWidth: needStrokeWidth}),
$(go.TextBlock, newNeedName, // the content is just the text label
{stroke: needColor, font: myFont }),
{click: function(e, obj) { needSelected(newNeedName); } }
);
var needsNode = needsDataArray; //document.getElementById("ForNeeds");
if (needsNode) { showMessage("needsNode is true; " + button)}
else {showMessage("needsNode is false")};
myDiagram.model.insertArrayItem(needsNode, -1, button);
myDiagram.commitTransaction("addNeed");
}// end function addNeed
var needsDataArray = [];
var linksNeedsDataArray = []; // always empty
myBannerNeeds.model = new go.GraphLinksModel( needsDataArray, linksNeedsDataArray);
myDiagram.grid.visible = true;
myDiagram.model.copiesArrays = true;
myDiagram.model.copiesArrayObjects = true;
addNeed("My new need");
function needSelected(e,obj) {
alert("e:" + e + "; obj:" + obj + ' selected')
}; //end function flowTypeSelected
function showMessage(s) {
document.getElementById("diagramEventsMsg").textContent = s;
}
}// end function init
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ; height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="ForNeeds">
<div id="myBannerNeedsDiv" style="display: inline-block; width: 200px; min-height: 400px; background: whitesmoke; margin-right: 0px; border: solid 1px purple;">
</div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; width: 804px;height: 100%; border: solid 1px black;">
</div>
</div>
</body>
</html>
最小码
变量ellipseStrokeWidth=3；
var ellipseWidth=80；
var Ellipsehight=25；
var myFont=“16px无衬线”；
var myFontMedium=“23px无衬线”；
var myFontLarge=“30px无衬线”；
宽度=170；
高度=20；
var needStrokeWidth=0；
var needColor='紫色'；
var portSize=新的go.Size（8,8）；
函数init（）{
var$=go.GraphObject.make；//用于定义节点模板的简洁性
我的图表=
$（go.Diagram，“myDiagramDiv”，
{
“undoManager.isEnabled”：真
});
Mybanneeds=
$（go.Diagram，“MyBanneedsDiv”，
{layout:$（go.GridLayout，{wrappingColumn:1，对齐方式：go.GridLayout.Position
})}
);
MyBanneeds.nodeTemplate=
$（go.Node，
$（go.Panel，“垂直”//需要列表按钮
{alignment:new go.Spot（0,0），行：0，列：0}，
新的go.Binding（“itemArray”、“needsDataArray”），
{itemTemplate:
$（go.Panel，
$（go.Shape，“矩形”，
{笔划：“红色”，笔划宽度：2，
高度：30，宽度：30}
),
$（go.TextBlock，{text:“…”，stroke:“gray”}，
新go.Binding（“文本”、“键”））
)//结束项模板
}
)//端部垂直面板
);
//在“需要”面板中添加一个按钮。
函数addneedName（newNeedName）{
myDiagram.startTransaction（“添加需求”）；
变量按钮=$（“按钮”，
$（go.Shape，“矩形”，
{宽度：needWidth，高度：needHeight，边距：4，填充：“白色”，
笔划：“rgb（227,18,18）”，笔划宽度：needStrokeWidth}），
$（go.TextBlock，newNeedName，//内容只是文本标签
{stroke:needColor，font:myFont}），
{单击：函数（e，obj）{needSelected（newNeedName）；}
);
var needsNode=needsDataArray；//document.getElementById（“ForNeeds”）；
if（needsNode）{showMessage（“needsNode为true；“+按钮）}
else{showMessage（“needsNode为false”）}；
myDiagram.model.insertArrayItem（需要节点，-1，按钮）；
myDiagram.commitTransaction（“添加需求”）；
}//结束函数addNeed
var needsDataArray=[]；
var linksNeedsDataArray=[]；//始终为空
mybanneeds.model=new go.graphlinkmodel（needsDataArray、linksNeedsDataArray）；
myDiagram.grid.visible=true；
myDiagram.model.copiesArrays=true；
myDiagram.model.copiesArrayObjects=true；
addNeed（“我的新需求”）；
所选功能（e、obj）{
警报（“e:+e+”obj:+obj+“选定”）
}；//结束函数flowTypeSelected
功能显示消息{
document.getElementById（“diagramEventsMsg”）.textContent=s；
}
}//结束函数初始化
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white" }),
$(go.Panel, "Vertical",
$(go.TextBlock,
{ margin: 4 },
new go.Binding("text")),
$(go.Panel, "Vertical",
new go.Binding("itemArray", "buttons"),
{
itemTemplate:
$("Button",
$(go.TextBlock, new go.Binding("text", "")),
{
click: function(e, button) {
alert(button.data);
}
}
)
}
)
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", buttons: ["one", "two"] },
{ key: 2, text: "Beta", buttons: ["one"] }
],
[
{ from: 1, to: 2 }
]);
}
function test() {
myDiagram.commit(function(diag) {
diag.selection.each(function(n) {
if (n instanceof go.Node) {
diag.model.addArrayItem(n.data.buttons, "another");
}
})
})
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button onclick="test()">Test</button>
</body>
</html>
最小GoJS样本
函数init（）{
var$=go.GraphObject.make；
我的图表=
$（go.Diagram，“myDiagramDiv”，
{“undoManager.isEnabled”：true}）；
myDiagram.nodeTemplate=
$（go.Node，“自动”，
$（go.Shape，
{填充：“白色”}），
$（go.Panel，“垂直”，
$（go.TextBlock，
{边距：4}，
新go.Binding（“文本”），
$（go.Panel，“垂直”，
新go.Binding（“itemArray”、“buttons”），
{
项目模板：
$（“按钮”，
$（go.TextBlock，新的go.Binding（“text”，”），
{
点击：功能（e，按钮）{
警报（按钮、数据）；
}
}
)
}
)
)
);
myDiagram.model=新的go.graphlinkmodel(
[
{键：1，文本：“Alpha”，按钮：[“1”，“2”]}，
{键：2，文本：“Beta”，按钮：[“一”]}
],
[
{从：1到：2}
]);
}
功能测试（）{
提交（函数（diag）{
每个诊断选择（功能（n）{
if（go.Node的n个实例）{
diag.model.addArrayItem（n.data.buttons，“另一个”）；
}
})
})
}
试验
数据.buttons警报，并使用该项的值作为字符串
请注意，添加到数据中JavaScript数组的值只是一个简单的对象——在本例中只是一个字符串，尽管每个数组项都是具有各种属性的JavaScript对象是很常见的。我认为您的问题在于您正在尝试向数组中添加GraphObjects。这是一个禁忌——你不应该把图表的图形对象和模型数据混在一起。我理解在模型中包含图形对象（按钮）的错误。您的示例正是我试图做的，我能够将其合并到我的代码中。