You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
848 lines
57 KiB
848 lines
57 KiB
<!doctype html>
|
|
<html class="default no-js">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Binding | GoJS API</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<!-- 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" target="api">API</a></li>
|
|
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
|
|
<li><a href="../../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="tsd-page-header">
|
|
<div class="tsd-page-toolbar">
|
|
<div class="container-fluid plr15">
|
|
<div class="table-wrap">
|
|
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
|
|
<div class="field">
|
|
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
|
<input id="tsd-search-field" type="text" />
|
|
</div>
|
|
<ul class="results">
|
|
<li class="state loading">Preparing search index...</li>
|
|
<li class="state failure">The search index is not available</li>
|
|
</ul>
|
|
<a href="../index.html" class="title">GoJS API</a>
|
|
</div>
|
|
<div class="table-cell" id="tsd-widgets">
|
|
<div id="tsd-filter">
|
|
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
|
<div class="tsd-filter-group">
|
|
<div class="tsd-select" id="tsd-filter-visibility">
|
|
<span class="tsd-select-label">All</span>
|
|
<ul class="tsd-select-list">
|
|
<li data-value="public">Public</li>
|
|
<li data-value="protected">Public/Protected</li>
|
|
<li data-value="private" class="selected">All</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tsd-page-title">
|
|
<div class="container-fluid plr15">
|
|
<div class="top-copyright">
|
|
<!--<b>GoJS</b>® Diagramming Components<br/>version <br/>version 2.0.17 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
|
|
<b>GoJS</b>® Diagramming Components<br/>version 2.0.17<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
|
|
</div>
|
|
<div>
|
|
<h1>Class Binding</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="container-fluid container-main plr15">
|
|
<div class="row">
|
|
<div class="col-8 col-content">
|
|
<section class="tsd-panel tsd-hierarchy">
|
|
<h3>Hierarchy</h3>
|
|
<ul class="tsd-hierarchy">
|
|
<li>
|
|
<span class="target">Binding</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-comment">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>A Binding describes how to automatically set a property on a <a href="GraphObject.html">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>
|
|
<p>Register bindings by calling <a href="GraphObject.html#bind">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="Part.html">Part</a>) is copied.
|
|
Bindings will be shared by all copies of the template's GraphObjects.</p>
|
|
<p>For example, your node data might be like:</p>
|
|
<pre><code class="hljs js">{ <span class="hljs-attr">key</span>: <span class="hljs-number">23</span>, <span class="hljs-attr">say</span>: <span class="hljs-string">"hello!"</span> }</code></pre>
|
|
<p>Your simple node template might be like:</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">var</span> template = <span class="hljs-keyword">new</span> go.Node(go.Panel.Auto);
|
|
<span class="hljs-comment">// . . . define the rest of the Node's visual tree . . .</span>
|
|
<span class="hljs-keyword">var</span> txt = <span class="hljs-keyword">new</span> go.TextBlock();
|
|
txt.bind(<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>, <span class="hljs-string">"say"</span>));
|
|
template.add(txt);
|
|
myDiagram.nodeTemplate = template;</code></pre>
|
|
<p>Using <a href="GraphObject.html#static-make">GraphObject.make</a> it might look like:</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">var</span> $ = go.GraphObject.make;
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, <span class="hljs-string">"Auto"</span>,
|
|
. . .
|
|
$(go.TextBlock, <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>, <span class="hljs-string">"say"</span>))
|
|
)</code></pre>
|
|
<p>The data binding causes the <a href="TextBlock.html#text">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>
|
|
<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="Model.html#setCategoryForNodeData">Model.setCategoryForNodeData</a>),
|
|
because then some bindings might be evaluated before or after the category has been changed.</p>
|
|
<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="GraphObject.html">GraphObject</a> property.
|
|
The most common conversion functions are provided for you --
|
|
they convert a string to a geometric class:
|
|
<a href="Point.html#static-parse">Point.parse</a>, <a href="Size.html#static-parse">Size.parse</a>, <a href="Rect.html#static-parse">Rect.parse</a>,
|
|
<a href="Margin.html#static-parse">Margin.parse</a>, <a href="Spot.html#static-parse">Spot.parse</a>, and <a href="Geometry.html#static-parse">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:</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"text"</span>, <span class="hljs-string">"say"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">v</span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-string">"I say: "</span> + v; })</code></pre>
|
|
<p>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.</p>
|
|
<h4>OneWay and TwoWay Bindings</h4>
|
|
By default bindings are <a href="Binding.html#static-OneWay">Binding.OneWay</a>.
|
|
OneWay bindings are evaluated when the <a href="Panel.html#data">Panel.data</a> property is set
|
|
or when you call <a href="Panel.html#updateTargetBindings">Panel.updateTargetBindings</a> or <a href="Model.html#setDataProperty">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="GraphObject.html">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>
|
|
<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="Model.html#nodeKeyProperty">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="Model.html#setKeyForNodeData">Model.setKeyForNodeData</a>,
|
|
but not via a data binding.</p>
|
|
<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="Point.html#static-stringify">Point.stringify</a>, <a href="Size.html#static-stringify">Size.stringify</a>, <a href="Rect.html#static-stringify">Rect.stringify</a>,
|
|
<a href="Margin.html#static-stringify">Margin.stringify</a>, <a href="Spot.html#static-stringify">Spot.stringify</a>, and <a href="Geometry.html#static-stringify">Geometry.stringify</a>.</p>
|
|
<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="Part.html#location">Part.location</a> by dragging a Node,
|
|
you can automatically keep the node's model data in sync using a TwoWay binding.</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"location"</span>, <span class="hljs-string">"loc"</span>, go.Point.parse).makeTwoWay(go.Point.stringify)</code></pre>
|
|
<p>The call to <a href="Binding.html#makeTwoWay">Binding.makeTwoWay</a> changes the <a href="Binding.html#mode">Binding.mode</a>
|
|
to be <a href="Binding.html#static-TwoWay">Binding.TwoWay</a> and specifies the <a href="Binding.html#backConverter">Binding.backConverter</a>
|
|
function to be the <a href="Point.html#static-stringify">Point.stringify</a> static function.</p>
|
|
<p>Because the Binding is on the whole node (<code>template</code>),
|
|
the target object is the whole <a href="Node.html">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.</p>
|
|
<h4>Binding Sources</h4>
|
|
The target of a Binding is always a property of a <a href="GraphObject.html">GraphObject</a> or a <a href="RowColumnDefinition.html">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="Model.html#modelData">Model.modelData</a>.
|
|
You can specify such a binding by calling <a href="Binding.html#ofModel">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="Model.html#setDataProperty">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="Model.html#modelData">Model.modelData</a> object
|
|
would be the sensible place for that shared information.</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"stroke"</span>, <span class="hljs-string">"strokeColor"</span>).ofModel()</code></pre>
|
|
<p>and to set or modify that color one would just call, within a transaction:</p>
|
|
<pre><code class="hljs js"> model.setDataProperty(model.modelData, <span class="hljs-string">"strokeColor"</span>, <span class="hljs-string">"red"</span>);</code></pre>
|
|
<p>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>
|
|
<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="Binding.html#ofObject">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="GraphObject.html#name">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="Panel.html#data">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>
|
|
<p>As a common kind of example of data binding between two properties of GraphObjects,
|
|
consider this Binding on a <a href="Shape.html">Shape</a> which changes the color of the <a href="Shape.html#stroke">Shape.stroke</a>
|
|
depending on whether the Node is selected (<a href="Part.html#isSelected">Part.isSelected</a>):</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"stroke"</span>, <span class="hljs-string">"isSelected"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">s</span>) </span>{ <span class="hljs-keyword">return</span> s ? <span class="hljs-string">"dodgerblue"</span> : <span class="hljs-string">"gray"</span>; }).ofObject()</code></pre>
|
|
<p>Note the call to <a href="Binding.html#ofObject">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="Part.html#isSelected">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.</p>
|
|
<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 href="GraphObject.html">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 href="Model.html">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.</p>
|
|
<pre><code class="hljs js"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toLocation</span>(<span class="hljs-params">data, node</span>) </span>{
|
|
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> go.Point(data.x, data.y);
|
|
}
|
|
|
|
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fromLocation</span>(<span class="hljs-params">loc, data, model</span>) </span>{
|
|
model.setDataProperty(data, <span class="hljs-string">"x"</span>, loc.x);
|
|
model.setDataProperty(data, <span class="hljs-string">"y"</span>, loc.y);
|
|
}
|
|
</code></pre>
|
|
<p>Then to data-bind the default template's <a href="Part.html#location">Part.location</a> property
|
|
to two separate data properties, "x" and "y":</p>
|
|
<pre><code class="hljs js"> <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"location"</span>, <span class="hljs-string">""</span>, toLocation).makeTwoWay(fromLocation)</code></pre>
|
|
<p>An empty string argument for the <em>sourceprop</em> 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="Part.html#location">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>
|
|
<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>
|
|
<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="Model.html#setDataProperty">Model.setDataProperty</a> so that the <a href="UndoManager.html">UndoManager</a> can record the change,
|
|
including the previous value.</p>
|
|
<h4>Replacing Items in Arrays</h4>
|
|
However, although a TwoWay Binding cannot replace the node data object in the <a href="Model.html#nodeDataArray">Model.nodeDataArray</a>,
|
|
it is possible to replace an item in an <a href="Panel.html#itemArray">Panel.itemArray</a>.
|
|
So if your node data were:
|
|
```js
|
|
{ key: 1, items: ["one", "two", "three"] }
|
|
```
|
|
And if your node template included something like:
|
|
```js
|
|
$(go.Panel, "Vertical",
|
|
new go.Binding("itemArray", "items"),
|
|
{
|
|
itemTemplate: $(go.Panel,
|
|
$(go.TextBlock, { editable: true },
|
|
new go.Binding("text", "").makeTwoWay())
|
|
)
|
|
}
|
|
)
|
|
```
|
|
Then the user would be able to edit any of the <a href="TextBlock.html">TextBlock</a>s, causing the item Array to be modified,
|
|
for example resulting in this node data:
|
|
```js
|
|
{ key: 1, items: ["one", "SOME NEW TEXT HERE", "three"] }
|
|
```
|
|
</div>
|
|
</section>
|
|
<section class="tsd-panel-group tsd-index-group">
|
|
<h2>Index</h2>
|
|
<section class="tsd-panel tsd-index-panel">
|
|
<div class="tsd-index-content">
|
|
<section class="tsd-index-section ">
|
|
<h3>Constructors</h3>
|
|
<ul class="tsd-index-list">
|
|
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Binding.html#constructor" class="tsd-kind-icon">constructor</a></li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-index-section ">
|
|
<h3>Properties</h3>
|
|
<ul class="tsd-index-list">
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#backConverter" class="tsd-kind-icon">back<wbr>Converter</a></li>
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#converter" class="tsd-kind-icon">converter</a></li>
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#isToModel" class="tsd-kind-icon">is<wbr>ToModel</a></li>
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#mode" class="tsd-kind-icon">mode</a></li>
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#sourceName" class="tsd-kind-icon">source<wbr>Name</a></li>
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#sourceProperty" class="tsd-kind-icon">source<wbr>Property</a></li>
|
|
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#targetProperty" class="tsd-kind-icon">target<wbr>Property</a></li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-index-section ">
|
|
<h3>Methods</h3>
|
|
<ul class="tsd-index-list">
|
|
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#copy" class="tsd-kind-icon">copy</a></li>
|
|
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#makeTwoWay" class="tsd-kind-icon">make<wbr>Two<wbr>Way</a></li>
|
|
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#ofModel" class="tsd-kind-icon">of<wbr>Model</a></li>
|
|
<li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#ofObject" class="tsd-kind-icon">of<wbr>Object</a></li>
|
|
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-parseEnum" class="tsd-kind-icon">parse<wbr>Enum</a></li>
|
|
<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-toString" class="tsd-kind-icon">to<wbr>String</a></li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-index-section ">
|
|
<h3>Constants</h3>
|
|
<ul class="tsd-index-list">
|
|
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-OneWay" class="tsd-kind-icon">One<wbr>Way</a></li>
|
|
<li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-TwoWay" class="tsd-kind-icon">Two<wbr>Way</a></li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
<section class="tsd-panel-group tsd-member-group ">
|
|
<h2>Constructors</h2>
|
|
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
|
|
<a name="constructor" class="tsd-anchor"></a>
|
|
<h3>
|
|
constructor
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
|
|
<li class="tsd-signature tsd-kind-icon">new <wbr>Binding<span class="tsd-signature-symbol">(</span>targetprop<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, sourceprop<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, conv<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Binding.html" class="tsd-signature-type">Binding</a></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>The constructor creates a one-way binding.</p>
|
|
</div>
|
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
|
<ul class="tsd-parameters">
|
|
<li>
|
|
<h5><span class="tsd-flag ts-flagOptional">Optional</span> targetprop: <span class="tsd-signature-type">string</span></h5>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>A string naming the target property on the target object.
|
|
This should not be the empty string.</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<h5><span class="tsd-flag ts-flagOptional">Optional</span> sourceprop: <span class="tsd-signature-type">string</span></h5>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>A string naming the source property on the bound data object.
|
|
If this is the empty string, the whole <a href="Panel.html#data">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.</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<h5><span class="tsd-flag ts-flagOptional">Optional</span> conv: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>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.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h4 class="tsd-returns-title">Returns <a href="Binding.html" class="tsd-signature-type">Binding</a></h4>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section class="tsd-panel-group tsd-member-group ">
|
|
<h2>Properties</h2>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="backConverter" class="tsd-anchor"></a>
|
|
<h3>
|
|
back<wbr>Converter
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">srcData</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">model</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Gets or sets a converter function to apply to the <a href="GraphObject.html">GraphObject</a> property value
|
|
in order to produce the value to set to a data property.
|
|
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="Binding.html#sourceProperty">sourceProperty</a>
|
|
is the empty string.</p>
|
|
<p>Conversion functions must not have any side-effects other than setting
|
|
the source property.</p>
|
|
<p>The function is passed the value from the target
|
|
(the first argument), the source <a href="Panel.html#data">Panel.data</a> object (the second argument),
|
|
and the <a href="Model.html">Model</a> (the third argument).
|
|
If the <a href="Binding.html#sourceProperty">sourceProperty</a> is a property name, that property is set to
|
|
the function's return value.
|
|
If the <a href="Binding.html#sourceProperty">sourceProperty</a> is the empty string, the function should
|
|
modify the second argument, which will be the source data object.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="converter" class="tsd-anchor"></a>
|
|
<h3>
|
|
converter
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<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.
|
|
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="Binding.html#targetProperty">targetProperty</a>
|
|
is the empty string.</p>
|
|
<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>
|
|
<p>The function is passed the value from the source
|
|
(the first argument) and the target <a href="GraphObject.html">GraphObject</a> (the second argument).
|
|
If the <a href="Binding.html#targetProperty">targetProperty</a> is a property name, that property is set to
|
|
the function's return value.
|
|
If the <a href="Binding.html#targetProperty">targetProperty</a> is the empty string, the function should
|
|
set a property on the second argument, which will be the target GraphObject.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="isToModel" class="tsd-anchor"></a>
|
|
<h3>
|
|
is<wbr>ToModel
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Gets or sets whether the source data is <a href="Model.html#modelData">Model.modelData</a> rather than a node data or link data object in the model.
|
|
The default value is false -- the source data object will not be the shared Model.modelData object.</p>
|
|
<dl class="tsd-comment-tags">
|
|
<dt>see</dt>
|
|
<dd><p><a href="Binding.html#ofModel">ofModel</a></p>
|
|
</dd>
|
|
<dt>since</dt>
|
|
<dd><p>1.7</p>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="mode" class="tsd-anchor"></a>
|
|
<h3>
|
|
mode
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Gets or sets the directions and frequency in which the binding may be evaluated.
|
|
The default value is <a href="Binding.html#static-OneWay">Binding.OneWay</a>.
|
|
<a href="Binding.html#static-TwoWay">Binding.TwoWay</a> is the other choice.</p>
|
|
<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="Model.html#setDataProperty">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>
|
|
<p>You should not have a TwoWay binding on a node data object's key property.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="sourceName" class="tsd-anchor"></a>
|
|
<h3>
|
|
source<wbr>Name
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Gets or sets the name of the <a href="GraphObject.html">GraphObject</a> that should act as a source object
|
|
whose property should be gotten by this data binding.
|
|
The default value is null, which uses the bound <a href="Panel.html#data">Panel.data</a> as the source.
|
|
If the value is a string, it should be the name of a <a href="GraphObject.html">GraphObject</a> in the
|
|
visual tree of the <a href="Panel.html">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="Node.html">Node</a> or <a href="Link.html">Link</a>,
|
|
but will be a <a href="Panel.html">Panel</a> if used in a <a href="Panel.html#itemTemplate">Panel.itemTemplate</a>.
|
|
The name must not contain a period.</p>
|
|
<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.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="sourceProperty" class="tsd-anchor"></a>
|
|
<h3>
|
|
source<wbr>Property
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Gets or sets the name of the property to get from the bound data object,
|
|
the value of <a href="Panel.html#data">Panel.data</a>.
|
|
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="Binding.html#sourceName">sourceName</a> is not null, then this property names the settable
|
|
property on the <a href="GraphObject.html">GraphObject</a> or <a href="RowColumnDefinition.html">RowColumnDefinition</a>
|
|
that acts as the source.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
|
|
<a name="targetProperty" class="tsd-anchor"></a>
|
|
<h3>
|
|
target<wbr>Property
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Gets or sets the name of the property to be set on the target <a href="GraphObject.html">GraphObject</a>.
|
|
The default value is the empty string; you should set this to be the name of a property.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section class="tsd-panel-group tsd-member-group ">
|
|
<h2>Methods</h2>
|
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
|
|
<a name="copy" class="tsd-anchor"></a>
|
|
<h3>
|
|
<span class="tsd-flag ts-flagVirtual">Virtual</span>
|
|
copy
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
<li class="tsd-signature tsd-kind-icon">copy<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Binding.html" class="tsd-signature-type">Binding</a></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Create a copy of this Binding, with the same property values.</p>
|
|
</div>
|
|
<h4 class="tsd-returns-title">Returns <a href="Binding.html" class="tsd-signature-type">Binding</a></h4>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
|
|
<a name="makeTwoWay" class="tsd-anchor"></a>
|
|
<h3>
|
|
make<wbr>Two<wbr>Way
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
<li class="tsd-signature tsd-kind-icon">make<wbr>Two<wbr>Way<span class="tsd-signature-symbol">(</span>backconv<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">srcData</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">model</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Binding.html" class="tsd-signature-type">Binding</a></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Modify this Binding to set its <a href="Binding.html#mode">mode</a> to be <a href="Binding.html#static-TwoWay">Binding.TwoWay</a>, and
|
|
provide an optional conversion function to convert <a href="GraphObject.html">GraphObject</a> property
|
|
values back to data values, as the value of <a href="Binding.html#backConverter">backConverter</a>.</p>
|
|
<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="Part.html#location">Part.location</a> by <a href="DraggingTool.html">DraggingTool</a> and
|
|
<a href="TextBlock.html#text">TextBlock.text</a> by <a href="TextEditingTool.html">TextEditingTool</a> (only if <a href="TextBlock.html#editable">TextBlock.editable</a> is true).</p>
|
|
<p>You should not have a TwoWay binding on a node data object's key property.</p>
|
|
</div>
|
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
|
<ul class="tsd-parameters">
|
|
<li>
|
|
<h5><span class="tsd-flag ts-flagOptional">Optional</span> backconv: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">srcData</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">model</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
|
|
</li>
|
|
</ul>
|
|
<h4 class="tsd-returns-title">Returns <a href="Binding.html" class="tsd-signature-type">Binding</a></h4>
|
|
<p>this two-way Binding.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
|
|
<a name="ofModel" class="tsd-anchor"></a>
|
|
<h3>
|
|
of<wbr>Model
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
<li class="tsd-signature tsd-kind-icon">of<wbr>Model<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Binding.html" class="tsd-signature-type">Binding</a></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Modify this Binding so that the source is the <a href="Model.html#modelData">Model.modelData</a> object,
|
|
not a regular node data object or another <a href="GraphObject.html">GraphObject</a> in the <a href="Part.html">Part</a>.</p>
|
|
<dl class="tsd-comment-tags">
|
|
<dt>see</dt>
|
|
<dd><p><a href="Binding.html#isToModel">isToModel</a>, <a href="Binding.html#ofObject">ofObject</a></p>
|
|
</dd>
|
|
<dt>since</dt>
|
|
<dd><p>1.7</p>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<h4 class="tsd-returns-title">Returns <a href="Binding.html" class="tsd-signature-type">Binding</a></h4>
|
|
<p>this Binding to the <a href="Model.html#modelData">Model.modelData</a> object.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
|
|
<a name="ofObject" class="tsd-anchor"></a>
|
|
<h3>
|
|
of<wbr>Object
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
|
|
<li class="tsd-signature tsd-kind-icon">of<wbr>Object<span class="tsd-signature-symbol">(</span>srcname<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Binding.html" class="tsd-signature-type">Binding</a></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>Modify this Binding to set its <a href="Binding.html#sourceName">sourceName</a> property so as to identify
|
|
a <a href="GraphObject.html">GraphObject</a> in the visual tree of the bound <a href="Panel.html">Panel</a> as the data source,
|
|
instead of the <a href="Panel.html#data">Panel.data</a> as the data source.</p>
|
|
<p>This permits data binding on GraphObject properties, such as <a href="Part.html#isSelected">Part.isSelected</a>.
|
|
Remember that you can reliably data bind only on settable properties, not on read-only or computed properties.</p>
|
|
<dl class="tsd-comment-tags">
|
|
<dt>see</dt>
|
|
<dd><p><a href="Binding.html#sourceName">sourceName</a>, <a href="Binding.html#ofModel">ofModel</a></p>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
|
<ul class="tsd-parameters">
|
|
<li>
|
|
<h5><span class="tsd-flag ts-flagOptional">Optional</span> srcname: <span class="tsd-signature-type">string</span></h5>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>the <a href="GraphObject.html#name">GraphObject.name</a> of an element in the visual tree of the bound <a href="Panel.html">Panel</a>;
|
|
use an empty string to refer to the root panel of that visual tree, whose <a href="Panel.html#data">Panel.data</a> is the bound data.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h4 class="tsd-returns-title">Returns <a href="Binding.html" class="tsd-signature-type">Binding</a></h4>
|
|
<p>this Binding to another GraphObject.</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
|
|
<a name="static-parseEnum" class="tsd-anchor"></a>
|
|
<h3>
|
|
<span class="tsd-flag ts-flagStatic">Static</span>
|
|
parse<wbr>Enum
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
|
|
<li class="tsd-signature tsd-kind-icon">parse<wbr>Enum<span class="tsd-signature-symbol">(</span>ctor<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, defval<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">name</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<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.</p>
|
|
<p>The normal usage is to pass the result of this function as the conversion function of a <a href="Binding.html">Binding</a>.</p>
|
|
<pre><code class="hljs js">linktemplate.bind(<span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">'routing'</span>, <span class="hljs-string">'dataPropName'</span>, go.Binding.parseEnum(go.Link, go.Link.Normal)));</code></pre>
|
|
<p>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="Link.html">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="Link.html#routing">Link.routing</a> property gets the default value, <a href="Link.html#static-Normal">Link.Normal</a>.</p>
|
|
</div>
|
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
|
<ul class="tsd-parameters">
|
|
<li>
|
|
<h5>ctor: <span class="tsd-signature-type">any</span></h5>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>the class constructor that defines the enumerated values that are being parsed.</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<h5>defval: <span class="tsd-signature-type">EnumValue</span></h5>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>the default enumerated value to return if it fails to parse the given string.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">name</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span></h4>
|
|
<p>a function that takes a string and returns an enumerated value.</p>
|
|
<ul class="tsd-parameters">
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
|
|
<a name="static-toString" class="tsd-anchor"></a>
|
|
<h3>
|
|
<span class="tsd-flag ts-flagStatic">Static</span>
|
|
to<wbr>String
|
|
</h3>
|
|
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
|
|
<li class="tsd-signature tsd-kind-icon">to<wbr>String<span class="tsd-signature-symbol">(</span>val<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
|
|
</ul>
|
|
<ul class="tsd-descriptions">
|
|
<li class="tsd-description">
|
|
<div class="tsd-comment tsd-typography">
|
|
<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".
|
|
If none are found, this just calls toString() on it.</p>
|
|
</div>
|
|
<h4 class="tsd-parameters-title">Parameters</h4>
|
|
<ul class="tsd-parameters">
|
|
<li>
|
|
<h5><span class="tsd-flag ts-flagOptional">Optional</span> val: <span class="tsd-signature-type">any</span></h5>
|
|
</li>
|
|
</ul>
|
|
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</section>
|
|
<section class="tsd-panel-group tsd-member-group ">
|
|
<h2>Constants</h2>
|
|
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
|
|
<a name="static-OneWay" class="tsd-anchor"></a>
|
|
<h3>
|
|
<span class="tsd-flag ts-flagStatic">Static</span>
|
|
One<wbr>Way
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>This value for <a href="Binding.html#mode">Binding.mode</a> uses data source values and sets <a href="GraphObject.html">GraphObject</a> properties.
|
|
Bindings are evaluated when <a href="Panel.html#updateTargetBindings">Panel.updateTargetBindings</a> is called.</p>
|
|
</div>
|
|
</section>
|
|
<section class="tsd-panel tsd-member tsd-kind-constant tsd-parent-kind-class tsd-is-static">
|
|
<a name="static-TwoWay" class="tsd-anchor"></a>
|
|
<h3>
|
|
<span class="tsd-flag ts-flagStatic">Static</span>
|
|
Two<wbr>Way
|
|
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span> </h3>
|
|
<div class="tsd-comment tsd-typography">
|
|
<p>This value for <a href="Binding.html#mode">Binding.mode</a> uses data source values and <a href="GraphObject.html">GraphObject</a> properties and keeps them in sync.
|
|
When <a href="Panel.html#updateTargetBindings">Panel.updateTargetBindings</a> is called, the <a href="GraphObject.html">GraphObject</a> properties are set.
|
|
When <a href="GraphObject.html">GraphObject</a> properties are modified, the <a href="Panel.html#data">Panel.data</a> properties are set.</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
<nav class="tsd-navigation primary">
|
|
<ul>
|
|
<li class="globals ">
|
|
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<nav class="tsd-navigation secondary menu-sticky">
|
|
<ul class="before-current">
|
|
</ul>
|
|
<ul class="current">
|
|
<li class="current tsd-kind-class">
|
|
<a href="Binding.html" class="tsd-kind-icon">Binding</a>
|
|
<ul>
|
|
<li class=" tsd-kind-constructor tsd-parent-kind-class">
|
|
<a href="Binding.html#constructor" class="tsd-kind-icon">constructor</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#backConverter" class="tsd-kind-icon">back<wbr>Converter</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#converter" class="tsd-kind-icon">converter</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#isToModel" class="tsd-kind-icon">is<wbr>ToModel</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#mode" class="tsd-kind-icon">mode</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#sourceName" class="tsd-kind-icon">source<wbr>Name</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#sourceProperty" class="tsd-kind-icon">source<wbr>Property</a>
|
|
</li>
|
|
<li class=" tsd-kind-accessor tsd-parent-kind-class">
|
|
<a href="Binding.html#targetProperty" class="tsd-kind-icon">target<wbr>Property</a>
|
|
</li>
|
|
<li class=" tsd-kind-method tsd-parent-kind-class">
|
|
<a href="Binding.html#copy" class="tsd-kind-icon">copy</a>
|
|
</li>
|
|
<li class=" tsd-kind-method tsd-parent-kind-class">
|
|
<a href="Binding.html#makeTwoWay" class="tsd-kind-icon">make<wbr>Two<wbr>Way</a>
|
|
</li>
|
|
<li class=" tsd-kind-method tsd-parent-kind-class">
|
|
<a href="Binding.html#ofModel" class="tsd-kind-icon">of<wbr>Model</a>
|
|
</li>
|
|
<li class=" tsd-kind-method tsd-parent-kind-class">
|
|
<a href="Binding.html#ofObject" class="tsd-kind-icon">of<wbr>Object</a>
|
|
</li>
|
|
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
|
|
<a href="Binding.html#static-parseEnum" class="tsd-kind-icon">parse<wbr>Enum</a>
|
|
</li>
|
|
<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
|
|
<a href="Binding.html#static-toString" class="tsd-kind-icon">to<wbr>String</a>
|
|
</li>
|
|
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
|
|
<a href="Binding.html#static-OneWay" class="tsd-kind-icon">One<wbr>Way</a>
|
|
</li>
|
|
<li class=" tsd-kind-constant tsd-parent-kind-class tsd-is-static">
|
|
<a href="Binding.html#static-TwoWay" class="tsd-kind-icon">Two<wbr>Way</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<ul class="after-current">
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid bottom-copyright plr15">
|
|
Copyright © 1998-2019 by Northwoods Software Corporation.
|
|
</div>
|
|
<div class="overlay"></div>
|
|
<script src="../assets/js/main.js"></script>
|
|
<script src="../../assets/js/api.js"></script>
|
|
<script src="../../assets/js/bootstrap.min.js"></script>
|
|
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-1506307-5', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html> |