Definindo uma Ligação

Para definir uma ligação em um modelo, coloque o nome da propriedade de origem de ligação entre chaves duplas {{ }}. Set it in quotation marks for string values of the binding destination property.
Por exemplo, para ligar a propriedade text da forma de texto à propriedade label do nó:
shape:{type:'text', text:'{{label}}' }
Para ligar uma propriedade de origem a um tipo de dado numérico que você deseja expressar como um valor numérico para a propriedade de destino, você deve aplicar o parâmetro de modelo como uma propriedade de objeto JavaScript. Consulte o Definindo Parâmetros como Propriedades de Objetos JavaScript.

Origem de Ligação

A origem de uma ligação pode ser:
  • Uma propriedade do objeto de destino que segue as convenções de nomenclatura da propriedade Java: para uma propriedade 'foo', deve haver um método getFoo().
    This property is called a bindable property.
  • Uma propriedade pública do objeto de destino.
  • Um método do objeto de destino. Por exemplo, text:'node {{getId}}'.
  • Um atributo de um item de armazenamento de dados. Consulte a seção Ligação com Itens de Armazenamento de Dados.
The binding engine supports chained properties in the form a.b.c. where a, b, and c corresponds to one of the supported binding sources. Por exemplo, a seguinte propriedade exibe a largura dos limites do nó:
text:'{{getBounds.width}}'

Ligação com Itens de Armazenamento de Dados

Se você usar o widget Diagrama e conectar-se a um armazenamento de dados para preencher um gráfico, será possível definir ligações com propriedades de itens de armazenamento de dados por meio da propriedade data do nó. Esta propriedade define o contexto de dados associado a um nó que foi criado a partir de um item de armazenamento de dados. Ao usar a propriedade data em uma ligação, é um atalho para a API de armazenamento de dados subjacente e permite referências diretas a atributos do item de dados.
Por exemplo, um armazenamento de dados de biblioteca pode ser preenchido com os seguintes itens:
{ 
  author: ..., 
  title: ...,
  ISBN:...
}
O modelo a seguir exibe o título e autor em duas formas de texto:
ibm_ilog.diagram.declareTemplate("[
{
  shape: { type:'text',
 text:'{{data.title}}' }
}, {
  shape: { type:'text', text:'{{data.author}}' }
}

]");
Além dos atributos do item de dados, uma ligação de armazenamento de dados também pode fazer referência a métodos do dojo.data.api. Os métodos suportados são:
  • getIdentity
  • getLabel
  • getAttributes
Por exemplo, é possível alterar o modelo para exibir a identidade do item de dados em vez de seu título:
ibm_ilog.diagram.declareTemplate("[
{
  shape: { type:'text',
 text:'{{data.getIdentity}}' }
}, {
  shape: { type:'text', text:'{{data.author}}' }
}

]");
Como o mecanismo de ligação é baseado no Django Template Language (DTL), é possível usar todos os recursos avançados suportados pela implementação de DTL do Dojo. Por exemplo, o modelo a seguir usa DTL para um script de loop. Ele itera sobre uma propriedade members definida pelo usuário (definida como uma matriz) para criar uma forma de Texto para cada item na matriz. As formas são organizadas automaticamente em uma pilha vertical pelo layout StackLayout.
ibm_ilog.diagram.declareTemplate("{
    layout:{type:'ibm_ilog.diagram.gfxlayout.GridLayout'},
    children:[{
            shape:{ 
                type:'rect', 
                width:1, 
                height:1
            }, 
            fill: '{{backgroundColor}}', 
            stroke: {'color': 'black', 'width': 2 }
        },
        {
            layout:{
                type:'ibm_ilog.diagram.gfxlayout.StackLayout',
                horizontal:false,
                gap:3,
                padding:[5,5,5,5]},
                children:[
                    {% for m in members %}

                        {
                            shape:{
                                type:'text', 
                                text:'{{m}}', 
                                align:'middle'
                            }, 
                            fill:'{{textColor}}', 
                            font:{type:'font', size:'10pt', family:'sans-serif'}
                        }

                    {% if not forloop.last %},{% endif %}

                    {% endfor %}
                ]
        }
    ]
}");

Definindo Parâmetros como Propriedades de Objetos JavaScript

Nos exemplos especificados na seção anterior, todos os parâmetros de ligação são expressos como sequências. The syntax used to define the binding, {{ ... }}, is not compliant with JavaScript, and therefore can prevent the template from being written as a plain JavaScript object.
It is not an issue when the binding expression is quoted, that is, when the variable that receives the binding expects a string, for example, text: '{{label}}'. Isto se torna um problema de bloqueio quando você deseja que um parâmetro ligado seja algo diferente de uma sequência, por exemplo, x: {{elemWidth}} + 10. Aqui, geralmente você deseja transmitir o parâmetro elemWidth como um tipo de dado numérico para o objeto de destino. Even when you can express all the template parameters as strings, it can make writing complex templates cumbersome (for example, templates with multiline strings). Isto também está sujeito a erros, porque um erro de sintaxe no próprio modelo pode ser difícil de ser detectado.
Para evitar estes problemas, expresse os parâmetros de modelo como objetos JavaScript e use a função global $bind() do mecanismo de modelagem para definir as ligações que não podem ser colocadas entre aspas. For example, if abscissa and ordinate properties are defined on the object to which the template is applied and these properties return a number that you want to use to place the shape in the graph, the template declaration might look like the following example:
var t = ibm_ilog.diagram.declareTemplate({ 
        shape:{
                type:'rect', 
                x: $bind("{{abscissa}}"),
                y: $bind("{{ordinate}}")
        }
});
var node = graph.createNode(t);

Usando a Função declareTemplate

Todos os modelos podem ser declarados usando a função ibm_ilog.diagram.declareTemplate(). This optional function processes the template so that it is ready to be used by the templating engine when it is applied on a shape.
If you do not declare your template through the declareTemplate() function, the template is processed by the templating engine each time it is applied. It can have a significant performance cost when your graph contains many nodes. While this function can be used for every template, it must be used particularly for templates that define bindings. Quando um modelo tiver sido declarado por meio desta função, ele não deverá ser modificado.