通常，我們想要操縱一個屬性，該屬性屬于Node的元素之一，也許是模板中任意深的元素。在示例圖中，每個節(jié)點都有一個Shape，如果我們想直接更改Shape的顏色，則需要對其進(jìn)行引用。為了找到它，我們可以給Shape命名：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { stroke: null, name: "SHAPE" }, // added the name property
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 6, font: "18px sans-serif" },
      new go.Binding("text", "key"))
  );

使用此按鈕，我們可以創(chuàng)建一個HTML按鈕，以更改選定節(jié)點內(nèi)部Shape的填充：

var selectionButton = document.getElementById("selectionButton");
selectionButton.addEventListener("click", function() {
  myDiagram.commit(function(d) {
    d.selection.each(function(node) {
      var shape = node.findObject("SHAPE");
      // If there was a GraphObject in the node named SHAPE, then set its fill to red:
      if (shape !== null) {
        shape.fill = "red";
      }
    });
  }, "change color");
});

使用數(shù)據(jù)綁定更改屬性和更新模型

再次查看我們的Node模板，我們將Shape.fill 屬性數(shù)據(jù)綁定到Node數(shù)據(jù)的“ color”屬性：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { stroke: null, name: "SHAPE" },
      new go.Binding("fill", "color")),  // note this data binding
    $(go.TextBlock,
      { margin: 6, font: "18px sans-serif" },
      new go.Binding("text", "key"))
  );

var node = myDiagram.findNodeForKey("Alpha");
var shape = node.findObject("SHAPE");
shape.fill = "red";

// outputs "lightblue" - the model has not changed!
console.log(node.data.color);

但是，在某些情況下，缺乏持久性可能是一件好事。例如，如果我們只希望出于外觀目的更改顏色，例如在將鼠標(biāo)懸停在按鈕上時更改按鈕的顏色，則我們不希望修改可能保存的模型數(shù)據(jù)。

現(xiàn)在，假設(shè)我們確實要更新模型。執(zhí)行此操作的首選方法是修改模型中的數(shù)據(jù)，并依靠數(shù)據(jù)綁定自動更新Shape。但是，我們不能僅通過設(shè)置JavaScript屬性來直接修改數(shù)據(jù)。

var node = myDiagram.findNodeForKey("Alpha");

// DO NOT DO THIS!
// This would update the data, but GoJS would not be notified
// that this arbitrary JavaScript object has been modified,
// and the associated Node will not be updated appropriately
node.data.color = "red";

  var node = myDiagram.findNodeForKey("Alpha");

  // Model.commit executes the given function within a transaction
  myDiagram.model.commit(function(m) {  // m == the Model

    // This is the safe way to change model data.
    // GoJS will be notified that the data has changed
    // so that it can update the node in the Diagram
    // and record the change in the UndoManager.
    m.set(node.data, "color", "red");

  }, "change color");

  // outputs "red" - the model has changed!
  console.log(node.data.color);
  // and the user will see the red node

請注意，不再需要將Shape命名為“ SHAPE”，因為不再需要調(diào)用findObject來查找特定的Shape。數(shù)據(jù)綁定將自動更新屬性，因此我們不必自己做。

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "Rectangle",
      { stroke: null },  // removed the name property
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 6, font: "18px sans-serif" },
      new go.Binding("text", "key"))
  );

提及的主題和進(jìn)一步閱讀

• 數(shù)據(jù)綁定—有關(guān)更多詳細(xì)信息，請參見“數(shù)據(jù)綁定”簡介頁。
• 交易-請參閱“交易”簡介頁。
• console.log—強大的調(diào)試輔助工具，它是大多數(shù)瀏覽器開發(fā)人員工具的一部分。有關(guān)各自的開發(fā)者控制臺，請參見Chrome指南或Firefox指南。在調(diào)試的簡介頁上查看有關(guān)調(diào)試GoJS圖表的更多建議。