1706 lines
72 KiB
HTML
1706 lines
72 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS® Binding Class</title>
|
|
|
|
<script src="../../assets/js/jquery.min.js"></script>
|
|
<script src="../../assets/js/bootstrap.min.js"></script>
|
|
<script src="../../assets/js/highlight.js"></script>
|
|
<script src="../../assets/js/api.js"></script>
|
|
|
|
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
|
|
<!-- custom CSS after bootstrap -->
|
|
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
|
|
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
|
|
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
|
|
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- non-fixed navbar -->
|
|
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
|
|
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="../../index.html">Home</a></li>
|
|
<li><a href="../../learn/index.html">Learn</a></li>
|
|
<li><a href="../../samples/index.html">Samples</a></li>
|
|
<li><a href="../../intro/index.html">Intro</a></li>
|
|
<li><a href="../../api/index.html">API</a></li>
|
|
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
|
|
<li><a href="../../doc/download.html">Download</a></li>
|
|
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
|
|
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
|
|
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
|
|
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- ============================== classes index ============================ -->
|
|
<div id="navindex" class="col-md-2">
|
|
<!-- begin publish.classesIndex -->
|
|
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
|
|
|
|
<div class="sidebar-nav">
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Diagram Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
|
|
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
|
|
|
|
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
|
|
|
|
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
|
|
|
|
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
|
|
|
|
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Geometry Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
|
|
|
|
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
|
|
|
|
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
|
|
|
|
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Model Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Layout Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Tool Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
|
|
|
|
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
|
|
|
|
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
|
|
|
|
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
|
|
|
|
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
|
|
|
|
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
|
|
|
|
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
|
|
|
|
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
|
|
|
|
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Collection Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
|
|
|
|
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
|
|
|
|
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> <!-- /class="sidebar-nav -->
|
|
|
|
|
|
|
|
|
|
<!-- end publish.classesIndex -->
|
|
</div>
|
|
|
|
<div id="contentBody" class="col-md-10">
|
|
<!-- ============================== header ================================= -->
|
|
<div id="header" class="fineprint mt30">
|
|
<b>GoJS</b>® Diagramming Components<br/>version 1.8.5 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
|
|
</div>
|
|
|
|
<!-- ============================== class title ============================ -->
|
|
<h2 class="classTitle mt30">
|
|
|
|
Class Binding
|
|
|
|
</h2>
|
|
|
|
<!-- ============================== class summary ========================== -->
|
|
<span class="hideshowall">
|
|
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
|
|
<span class="details"><button id="buttonHide">Show Summaries</button></span>
|
|
</span>
|
|
|
|
<p class="classsummary">
|
|
|
|
|
|
|
|
A Binding describes how to automatically set a property on a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>
|
|
to a value of a property of data in the model.
|
|
The target property name and the data source property name are strings.
|
|
All name matching is case-sensitive.
|
|
<p>
|
|
Register bindings by calling <a href="../symbols/GraphObject.html#bind" class="linkMethod">GraphObject.bind</a> with a new Binding.
|
|
Existing bindings become read-only, and no new bindings may be added,
|
|
when a template (a <a href="../symbols/Part.html" class="linkConstructor">Part</a>) is copied.
|
|
Bindings will be shared by all copies of the template's GraphObjects.
|
|
<p>
|
|
For example, your node data might be like:
|
|
<pre>
|
|
{ key: 23, say: "hello!" }
|
|
</pre>
|
|
<p>
|
|
Your simple node template might be like:
|
|
<pre>
|
|
var template = new go.Node(go.Panel.Auto);
|
|
// . . . define the rest of the Node's visual tree . . .
|
|
var txt = new go.TextBlock();
|
|
txt.bind(new go.Binding("text", "say"));
|
|
template.add(txt);
|
|
myDiagram.nodeTemplate = template;
|
|
</pre>
|
|
Using <a>GraphObject.make</a> it might look like:
|
|
<pre>
|
|
var $ = go.GraphObject.make;
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
. . .
|
|
$(go.TextBlock, new go.Binding("text", "say"))
|
|
)
|
|
</pre>
|
|
<p>
|
|
The data binding causes the <a href="../symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> property of
|
|
the TextBlock to be set to the value of the data's "say" property.
|
|
If the value of the "say" property of a particular data object is undefined,
|
|
the binding is not evaluated: the target property is not set.
|
|
If there is an error with the binding, you may see a message in the console log.
|
|
For this reason you may want to explicitly set the initial value for a property
|
|
when defining the GraphObject, since that value will remain as the default value
|
|
if the Binding is not evaluated.
|
|
<p>
|
|
Bindings are not necessarily evaluated in any particular order.
|
|
Binding sources should not be (or depend in a conversion function on) the category of the data
|
|
if you might be modifying the category (e.g. by calling <a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">Model.setCategoryForNodeData</a>),
|
|
because then some bindings might be evaluated before or after the category has been changed.
|
|
<h4>Conversions</h4>
|
|
Sometimes the data value needs to be modified or converted in order
|
|
to be used as the new value of a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property.
|
|
The most common conversion functions are provided for you --
|
|
they convert a string to a geometric class:
|
|
<a href="../symbols/Point.html#.parse" class="linkStatic">Point.parse</a>, <a href="../symbols/Size.html#.parse" class="linkStatic">Size.parse</a>, <a href="../symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a>,
|
|
<a href="../symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a>, <a href="../symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a>, and <a href="../symbols/Geometry.html#.parse" class="linkStatic">Geometry.parse</a>.
|
|
But you can easily define your own conversion function.
|
|
<p>
|
|
As an example of a conversion function, let's use a function that adds some
|
|
text prefixing the data property value:
|
|
<pre>
|
|
new go.Binding("text", "say", function(v) { return "I say: " + v; })
|
|
</pre>
|
|
Although simple conversions cover almost all binding cases, there are some infrequent uses
|
|
that are covered by "Advanced Conversions", discussed below.
|
|
Conversion functions must not have any side-effects.
|
|
Conversion functions may be called frequently, so they should be fast and avoid allocating memory.
|
|
The order in which conversion functions are called is not specified and may vary.
|
|
<h4>OneWay and TwoWay Bindings</h4>
|
|
By default bindings are <a href="../symbols/Binding.html#OneWay" class="linkConstant">Binding.OneWay</a>.
|
|
OneWay bindings are evaluated when the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property is set
|
|
or when you call <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> or <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>.
|
|
OneWay bindings only transfer values from the source to the target.
|
|
<p>
|
|
TwoWay bindings are evaluated in the source-to-target direction just as OneWay
|
|
bindings are evaluated.
|
|
However when the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> target property is set, the TwoWay
|
|
bindings are evaluated in the target-to-source direction.
|
|
There is no point in having a TwoWay binding on a GraphObject property that cannot be set.
|
|
For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
<p>
|
|
You should not have a TwoWay binding with a source that is a node data object's key property,
|
|
i.e. on the data property whose name is the same as the value of <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">Model.nodeKeyProperty</a>.
|
|
Unintentionally changing the node key value to be the same as another node data's key value
|
|
may cause indeterminate behavior.
|
|
Furthermore, changing a node data key without changing any references to that node
|
|
using the key value will result in "dangling" references and inconsistent relationships.
|
|
You can make that change safely by calling <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">Model.setKeyForNodeData</a>,
|
|
but not via a data binding.
|
|
<p>
|
|
The target-to-source update can also go through a conversion function.
|
|
The most common back-conversion functions are provided for you.
|
|
They convert a geometric class to a string:
|
|
<a href="../symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a>, <a href="../symbols/Size.html#.stringify" class="linkStatic">Size.stringify</a>, <a href="../symbols/Rect.html#.stringify" class="linkStatic">Rect.stringify</a>,
|
|
<a href="../symbols/Margin.html#.stringify" class="linkStatic">Margin.stringify</a>, <a href="../symbols/Spot.html#.stringify" class="linkStatic">Spot.stringify</a>, and <a href="../symbols/Geometry.html#.stringify" class="linkStatic">Geometry.stringify</a>.
|
|
<p>
|
|
It is common to want to update some data properties based on changes to the diagram.
|
|
For example, as the user changes the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> by dragging a Node,
|
|
you can automatically keep the node's model data in sync using a TwoWay binding.
|
|
<pre>
|
|
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
|
|
</pre>
|
|
The call to <a href="../symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a> changes the <a href="../symbols/Binding.html#mode" class="linkProperty">Binding.mode</a>
|
|
to be <a href="../symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a> and specifies the <a href="../symbols/Binding.html#backConverter" class="linkProperty">Binding.backConverter</a>
|
|
function to be the <a href="../symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a> static function.
|
|
<p>
|
|
Because the Binding is on the whole node (<code>template</code>),
|
|
the target object is the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> and the target property is "location".
|
|
The value of <code>data.loc</code> will be a string representation of the <code>Node.location</code> value.
|
|
<h4>Binding Sources</h4>
|
|
The target of a Binding is always a property of a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> or a <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.
|
|
The source of a Binding is normally a property of a data object in the model.
|
|
But it is also possible to have the source of a Binding be the shared JavaScript object that is the value of <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a>.
|
|
You can specify such a binding by calling <a href="../symbols/Binding.html#ofModel" class="linkMethod">Binding.ofModel</a>, meaning "a binding of a source that is a property of the Model.modelData".
|
|
<p>
|
|
As an example, you might want all Nodes to use the same color.
|
|
It would be possible but not natural to bind to a property on the node data object, because that property would have to be
|
|
duplicated on all of the node data objects in the model, and updating the property would mean calling <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>
|
|
on each node data object with the same new value. Furthermore if there happened to be no nodes at all in the model,
|
|
there would be no place to save the data. Hence using the shared <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a> object
|
|
would be the sensible place for that shared information.
|
|
<pre>
|
|
new go.Binding("stroke", "strokeColor").ofModel()
|
|
</pre>
|
|
and to set or modify that color one would just call, within a transaction:
|
|
<pre>
|
|
model.setDataProperty(model.modelData, "strokeColor", "red");
|
|
</pre>
|
|
That would cause all nodes with that model data binding to be re-evaluated.
|
|
It is not commonplace to have a TwoWay Binding on "ofModel" Bindings, but that should work.
|
|
Converters also work with "ofModel" Bindings.
|
|
<p>
|
|
And it is also possible to have the source of a Binding be another GraphObject that is in the same Part.
|
|
You can enable such a binding by calling <a href="../symbols/Binding.html#ofObject" class="linkMethod">Binding.ofObject</a>, meaning "a binding of a source that is a property of a GraphObject".
|
|
You just have to make sure that object has a unique <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> or is the Part itself.
|
|
The source property on the GraphObject has to be settable, and the Part must have a value for <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>.
|
|
(If the source property setter does not notify about property value changes, the binding mechanism will not be invoked.
|
|
Similarly, if there is no Panel.data, the binding mechanism is not active.)
|
|
<p>
|
|
As a common kind of example of data binding between two properties of GraphObjects,
|
|
consider this Binding on a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> which changes the color of the <a href="../symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a>
|
|
depending on whether the Node is selected (<a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a>):
|
|
<pre>
|
|
new go.Binding("stroke", "isSelected", function(s) { return s ? "dodgerblue" : "gray"; }).ofObject()
|
|
</pre>
|
|
Note the call to <a href="../symbols/Binding.html#ofObject" class="linkMethod">Binding.ofObject</a>, which tells the Binding that it should use as the source
|
|
a GraphObject with a particular name. However that name argument is optional -- supplying no name
|
|
(or supplying an empty string) will cause the binding to operate with the root GraphObject.
|
|
In this case that would be the Node itself.
|
|
Now with this binding whenever the value of <a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> changes, this Shape's stroke changes color.
|
|
The conversion function is what changes the boolean "isSelected" value to a brush color specifier.
|
|
<h4>Advanced Conversions</h4>
|
|
The binding functionality also has more advanced features for less common situations.
|
|
The source property name may be an empty string, to convert the object as a whole.
|
|
Conversion functions may take a second argument that takes the object that is bound.
|
|
For source-to-target conversions, the second argument will be the <a>GraphObject</a> whose property is bound.
|
|
For target-to-source (back-)conversions, the second argument will be the source data object and
|
|
the third argument will be the <a>Model</a>.
|
|
<p>
|
|
Here's an example of a two-way data-binding using two custom conversion functions working with two separate data properties.
|
|
First we define the two conversion functions.
|
|
<pre>
|
|
function toLocation(data, node) {
|
|
return new go.Point(data.x, data.y);
|
|
};
|
|
function fromLocation(loc, data, model) {
|
|
model.setDataProperty(data, "x", loc.x);
|
|
model.setDataProperty(data, "y", loc.y);
|
|
};
|
|
</pre>
|
|
<p>
|
|
Then to data-bind the default template's <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> property
|
|
to two separate data properties, "x" and "y":
|
|
<pre>
|
|
new go.Binding("location", "", toLocation).makeTwoWay(fromLocation)
|
|
</pre>
|
|
<p>
|
|
An empty string argument for the <i>sourceprop</i> parameter indicates
|
|
that the whole data object should be passed to the <code>toLocation</code> function,
|
|
rather than the value of some property of that data.
|
|
The return value is used as the new value for the <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> property.
|
|
In almost all cases the second argument is not used.
|
|
Caution: for efficiency reasons you should try to avoid using an empty source property name.
|
|
Such bindings will be evaluated much more frequently than ones whose source is a particular property name.
|
|
<p>
|
|
The binding works normally for the source-to-target direction.
|
|
But when the target property is modified it is the source property that is
|
|
set with the back-converted property value from the target object.
|
|
Because in this example the source property name is the empty string,
|
|
and because one cannot replace the whole source data object,
|
|
any return value from the conversion function is ignored.
|
|
Instead the conversion function has to modify the data object directly,
|
|
as this example <code>fromLocation</code> function does.
|
|
<p>
|
|
Note that because the source property name is the empty string, the binding system will not know
|
|
which properties are modified in the call to <code>fromLocation</code>.
|
|
Hence to support undo and redo, in order to make the data changes we have to call
|
|
<a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a> so that the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> can record the change,
|
|
including the previous value.
|
|
<h4>Replacing Items in Arrays</h4>
|
|
However, although a TwoWay Binding cannot replace the node data object in the <a>Model.nodeDataArray</a>,
|
|
it is possible to replace an item in an <a>Panel.itemArray</a>.
|
|
So if your node data were:
|
|
<pre>{ key: 1, items: ["one", "two", "three"] }</pre>
|
|
And if your node template included something like:
|
|
<pre>
|
|
$(go.Panel, "Vertical",
|
|
new go.Binding("itemArray", "items"),
|
|
{
|
|
itemTemplate: $(go.Panel,
|
|
$(go.TextBlock, { editable: true },
|
|
new go.Binding("text", "").makeTwoWay())
|
|
)
|
|
}
|
|
)</pre>
|
|
Then the user would be able to edit any of the <a>TextBlock</a>s, causing the item Array to be modified,
|
|
for example resulting in this node data:
|
|
<pre>{ key: 1, items: ["one", "SOME NEW TEXT HERE", "three"] }</pre>
|
|
</p>
|
|
|
|
<!-- ============================== constructor summary ==================== -->
|
|
|
|
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Binding.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="name" >
|
|
<div class="name">
|
|
Binding(targetprop, sourceprop, conv)
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>The constructor creates a one-way binding.<span class="nodetails" id="xconBinding"><a class="morelink" onclick="hst('conBinding')">More...</a></span> <span class="details" id="conBinding"></span>
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>targetprop</b>
|
|
|
|
</dt>
|
|
<dd>A string naming the target property on the target object.
|
|
This should not be the empty string.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>sourceprop</b>
|
|
|
|
</dt>
|
|
<dd>A string naming the source property on the bound data object.
|
|
If this is the empty string, the whole <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> object is used.
|
|
If this argument is not supplied, the source property is assumed to be the same as the target property.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(*,*) | null=}</span> <b>conv</b>
|
|
|
|
</dt>
|
|
<dd>A side-effect-free function converting the data property value to the value to set the target property.
|
|
If the function is null or not supplied, no conversion takes place.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
<!-- ============================== properties summary ===================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Binding.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Value Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="backConverter" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
backConverter
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(*,*,*) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets a converter function to apply to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property value
|
|
in order to produce the value to set to a data property.<span class="nodetails" id="xpropbackConverter"><a class="morelink" onclick="hst('propbackConverter')">More...</a></span> <span class="details" id="propbackConverter">
|
|
This conversion function is only used in a TwoWay binding,
|
|
when transferring a value from the target to the source.
|
|
The default value is null -- no conversion takes place.
|
|
Otherwise the value should be a function that takes one or two arguments
|
|
and returns the desired value.
|
|
However, the return value is ignored when the <a href="../symbols/Binding.html#sourceProperty" class="linkProperty">sourceProperty</a>
|
|
is the empty string.
|
|
</span><div class="details" id="dpropbackConverter"><p>
|
|
Conversion functions must not have any side-effects other than setting
|
|
the source property.
|
|
<p>
|
|
The function is passed the value from the target
|
|
(the first argument), the source <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> object (the second argument),
|
|
and the <a href="../symbols/Model.html" class="linkConstructor">Model</a> (the third argument).
|
|
If the <a href="../symbols/Binding.html#sourceProperty" class="linkProperty">sourceProperty</a> is a property name, that property is set to
|
|
the function's return value.
|
|
If the <a href="../symbols/Binding.html#sourceProperty" class="linkProperty">sourceProperty</a> is the empty string, the function should
|
|
modify the second argument, which will be the source data object.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="converter" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
converter
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(*,*) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets a converter function to apply to the data property value
|
|
in order to produce the value to set to the target property.<span class="nodetails" id="xpropconverter"><a class="morelink" onclick="hst('propconverter')">More...</a></span> <span class="details" id="propconverter">
|
|
This conversion function is used in both OneWay and TwoWay bindings,
|
|
when transferring a value from the source to the target.
|
|
The default value is null -- no conversion takes place.
|
|
Otherwise the value should be a function that takes one or two arguments
|
|
and returns the desired value.
|
|
However, the return value is ignored when the <a href="../symbols/Binding.html#targetProperty" class="linkProperty">targetProperty</a>
|
|
is the empty string.
|
|
</span><div class="details" id="dpropconverter"><p>
|
|
Conversion functions must not have any side-effects other than setting
|
|
the target property. In particular you should not try to modify the
|
|
structure of the visual tree in the target GraphObject's Part's visual tree.
|
|
<p>
|
|
The function is passed the value from the source
|
|
(the first argument) and the target <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> (the second argument).
|
|
If the <a href="../symbols/Binding.html#targetProperty" class="linkProperty">targetProperty</a> is a property name, that property is set to
|
|
the function's return value.
|
|
If the <a href="../symbols/Binding.html#targetProperty" class="linkProperty">targetProperty</a> is the empty string, the function should
|
|
set a property on the second argument, which will be the target GraphObject.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isToModel" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isToModel
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the source data is <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a> rather than a node data or link data object in the model.<span class="nodetails" id="xpropisToModel"><a class="morelink" onclick="hst('propisToModel')">More...</a></span> <span class="details" id="propisToModel">
|
|
The default value is false -- the source data object will not be the shared Model.modelData object.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Binding.html#ofModel" class="linkMethod">ofModel</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mode" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mode
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the directions and frequency in which the binding may be evaluated.<span class="nodetails" id="xpropmode"><a class="morelink" onclick="hst('propmode')">More...</a></span> <span class="details" id="propmode">
|
|
The default value is <a href="../symbols/Binding.html#OneWay" class="linkConstant">Binding.OneWay</a>.
|
|
<a href="../symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a> is the other choice.
|
|
</span><div class="details" id="dpropmode"><p>
|
|
Use OneWay bindings to initialize GraphObject properties based on model data,
|
|
or to modify GraphObject properties when the model data changes with a call to <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>.
|
|
Use TwoWay bindings to keep model data in sync with changes to GraphObject properties.
|
|
For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
<p>
|
|
You should not have a TwoWay binding on a node data object's key property.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="sourceName" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
sourceName
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that should act as a source object
|
|
whose property should be gotten by this data binding.<span class="nodetails" id="xpropsourceName"><a class="morelink" onclick="hst('propsourceName')">More...</a></span> <span class="details" id="propsourceName">
|
|
The default value is null, which uses the bound <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> as the source.
|
|
If the value is a string, it should be the name of a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the
|
|
visual tree of the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that is bound to the data.
|
|
Use the empty string to refer to the root panel, which is typically the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> or <a href="../symbols/Link.html" class="linkConstructor">Link</a>,
|
|
but will be a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> if used in a <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">Panel.itemTemplate</a>.
|
|
The name must not contain a period.
|
|
</span><div class="details" id="dpropsourceName"><p>
|
|
Binding only works if the source property is settable, not on computed or read-only properties,
|
|
and if it supports notification.
|
|
The documentation for the GraphObject (or subclass of GraphObject) property will indicate if the property is settable
|
|
and if it does not notify.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="sourceProperty" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
sourceProperty
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of the property to get from the bound data object,
|
|
the value of <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>.<span class="nodetails" id="xpropsourceProperty"><a class="morelink" onclick="hst('propsourceProperty')">More...</a></span> <span class="details" id="propsourceProperty">
|
|
The default value is the empty string, which results in setting the target
|
|
property to the whole data object, rather than to a property value of the data object.
|
|
If <a href="../symbols/Binding.html#sourceName" class="linkProperty">sourceName</a> is not null, then this property names the settable
|
|
property on the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> or <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>
|
|
that acts as the source.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="targetProperty" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
targetProperty
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of the property to be set on the target <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.<span class="nodetails" id="xproptargetProperty"><a class="morelink" onclick="hst('proptargetProperty')">More...</a></span> <span class="details" id="proptargetProperty">
|
|
The default value is the empty string; you should set this to be the name of a property.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ============================== methods summary ======================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class Binding.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Return Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="copy">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
copy()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Create a copy of this Binding, with the same property values.
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="makeTwoWay">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
makeTwoWay(backconv)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Modify this Binding to set its <a href="../symbols/Binding.html#mode" class="linkProperty">mode</a> to be <a href="../symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a>, and
|
|
provide an optional conversion function to convert <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property
|
|
values back to data values, as the value of <a href="../symbols/Binding.html#backConverter" class="linkProperty">backConverter</a>.<span class="nodetails" id="xmethmakeTwoWay"><a class="morelink" onclick="hst('methmakeTwoWay')">More...</a></span> <span class="details" id="methmakeTwoWay">
|
|
</span><div class="details" id="dmethmakeTwoWay"><p>
|
|
Use TwoWay bindings to keep model data in sync with changes to GraphObject properties.
|
|
For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
It is typical only to use TwoWay bindings on properties that are modified by tools or commands.
|
|
Examples include <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a> by <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> and
|
|
<a href="../symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> by <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a> (only if <a href="../symbols/TextBlock.html#editable" class="linkProperty">TextBlock.editable</a> is true).
|
|
<p>
|
|
You should not have a TwoWay binding on a node data object's key property.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(*,*,*) | null=}</span> <b>backconv</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> this two-way Binding.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="ofModel">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
ofModel()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Modify this Binding so that the source is the <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a> object,
|
|
not a regular node data object or another <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the <a href="../symbols/Part.html" class="linkConstructor">Part</a>.<span class="nodetails" id="xmethofModel"><a class="morelink" onclick="hst('methofModel')">More...</a></span> <span class="details" id="methofModel"></span>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Binding.html#isToModel" class="linkProperty">isToModel</a></li>
|
|
|
|
<li><a href="../symbols/Binding.html#ofObject" class="linkMethod">ofObject</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> this Binding to the <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a> object.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="ofObject">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
ofObject(srcname)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Modify this Binding to set its <a href="../symbols/Binding.html#sourceName" class="linkProperty">sourceName</a> property so as to identify
|
|
a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the visual tree of the bound <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as the data source,
|
|
instead of the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> as the data source.<span class="nodetails" id="xmethofObject"><a class="morelink" onclick="hst('methofObject')">More...</a></span> <span class="details" id="methofObject">
|
|
</span><div class="details" id="dmethofObject"><p>
|
|
This permits data binding on GraphObject properties, such as <a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a>.
|
|
Remember that you can reliably data bind only on settable properties, not on read-only or computed properties.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Binding.html#sourceName" class="linkProperty">sourceName</a></li>
|
|
|
|
<li><a href="../symbols/Binding.html#ofModel" class="linkMethod">ofModel</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>srcname</b>
|
|
|
|
</dt>
|
|
<dd>the <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> of an element in the visual tree of the bound <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>;
|
|
use an empty string to refer to the root panel of that visual tree, whose <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> is the bound data.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> this Binding to another GraphObject.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id=".parseEnum">
|
|
<td class="name">
|
|
<static>
|
|
<div class="name">
|
|
Binding.parseEnum(ctor, defval)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(string):EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This static function can be used to create a function that parses
|
|
a string into an enumerated value, given the class that the enumeration values
|
|
are defined on and a default value if the string cannot be parsed successfully.<span class="nodetails" id="xmethparseEnum"><a class="morelink" onclick="hst('methparseEnum')">More...</a></span> <span class="details" id="methparseEnum">
|
|
</span><div class="details" id="dmethparseEnum"><p>
|
|
The normal usage is to pass the result of this function as the conversion function of a <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>.
|
|
<pre>
|
|
linktemplate.bind(new go.Binding('routing', 'dataPropName', go.Binding.parseEnum(go.Link, go.Link.Normal)));
|
|
</pre>
|
|
This binding will try to parse the string that is the value of the bound data's "dataPropName" property.
|
|
If it is a legitimate enumerated value defined on the <a href="../symbols/Link.html" class="linkConstructor">Link</a> class, the conversion
|
|
function will return that value.
|
|
If the bound data's "dataPropName" property is not present or has an unrecognized value,
|
|
the <a href="../symbols/Link.html#routing" class="linkProperty">Link.routing</a> property gets the default value, <a href="../symbols/Link.html#Normal" class="linkConstant">Link.Normal</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function()}</span> <b>ctor</b>
|
|
|
|
</dt>
|
|
<dd>the class constructor that defines the enumerated values that are being parsed.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{EnumValue}</span> <b>defval</b>
|
|
|
|
</dt>
|
|
<dd>the default enumerated value to return if it fails to parse the given string.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{function(string):EnumValue}</span> a function that takes a string and returns an enumerated value.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id=".toString">
|
|
<td class="name">
|
|
<static>
|
|
<div class="name">
|
|
Binding.toString(val)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This static function can be used to convert an object to a string,
|
|
looking for commonly defined data properties, such as "text", "name", "key", or "id".<span class="nodetails" id="xmethtoString"><a class="morelink" onclick="hst('methtoString')">More...</a></span> <span class="details" id="methtoString">
|
|
If none are found, this just calls toString() on it.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*=}</span> <b>val</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{string}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== events summary ======================== -->
|
|
|
|
|
|
<!-- ============================== fields summary ===================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Constants<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Binding.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="OneWay">
|
|
<td class="name">
|
|
<div class="name">
|
|
OneWay
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Binding.html#mode" class="linkProperty">Binding.mode</a> uses data source values and sets <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties.<span class="nodetails" id="xfldOneWay"><a class="morelink" onclick="hst('fldOneWay')">More...</a></span> <span class="details" id="fldOneWay">
|
|
Bindings are evaluated when <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> is called.</span>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="TwoWay">
|
|
<td class="name">
|
|
<div class="name">
|
|
TwoWay
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Binding.html#mode" class="linkProperty">Binding.mode</a> uses data source values and <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties and keeps them in sync.<span class="nodetails" id="xfldTwoWay"><a class="morelink" onclick="hst('fldTwoWay')">More...</a></span> <span class="details" id="fldTwoWay">
|
|
When <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> is called, the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties are set.
|
|
When <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties are modified, the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> properties are set.</span>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== constructor details ==================== -->
|
|
|
|
</div> <!-- end contentBody -->
|
|
</div> <!-- end container-fluid -->
|
|
|
|
<!-- ============================== footer ================================= -->
|
|
<div id="footer" class="fineprint" style="clear:both">
|
|
Copyright © 1998-2017 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
|
|
</div>
|
|
</body>
|
|
</html>
|