Polímero - Sistema de Dados
O polímero permite observar as mudanças nas propriedades de um elemento realizando diferentes ações, como -
Observers - Ele invoca os callbacks sempre que os dados mudam.
Computed Properties - Ele calcula as propriedades virtuais com base em outras propriedades e as recalcula sempre que os dados de entrada mudam.
Data Bindings - Ele atualiza as propriedades, atributos ou o conteúdo de texto de um nó DOM usando anotações sempre que os dados mudam.
Caminhos de Dados
Pathé uma string no sistema de dados, que fornece uma propriedade ou subpropriedade relativa a um escopo. O escopo pode ser um elemento de host. Os caminhos podem ser vinculados a diferentes elementos usando vinculação de dados. A mudança de dados pode ser movida de um elemento para outro, se os elementos estiverem conectados com vinculação de dados.
Exemplo
<dom-module id = "my-profile">
<template>
. . .
<address-card address="{{myAddress}}"></address-card>
</template>
. . .
</dom-module>Os dois caminhos acima (meu perfil e cartão de endereço) podem ser conectados com vinculação de dados, se <address-card> estiver no DOM local do elemento <my-profile>.
A seguir estão os tipos especiais de segmentos de caminho em Polymer.js -
O caractere curinga (*) pode ser usado como o último segmento em um caminho.
As mutações da matriz podem ser exibidas para uma determinada matriz, colocando emendas de string como o último segmento em um caminho.
Caminhos de item de matriz indicam um item em uma matriz e o segmento de caminho numérico especifica um índice de matriz.
Em um caminho de dados, cada segmento de caminho é um nome de propriedade e inclui dois tipos de caminhos a seguir -
Os segmentos de caminho separados por pontos. Por exemplo: "apple.grapes.orange".
Em uma matriz de strings, cada elemento da matriz é um segmento de caminho ou um caminho pontilhado. Por exemplo: ["maçã", "uvas", "laranja"], ["maçã.grapes", "laranja"].
Fluxo de dados
Exemplo
O exemplo a seguir especifica uma associação bidirecional de fluxo de dados. Crie um arquivo index.html e adicione o seguinte código nele.
<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>Agora crie outro arquivo chamado my-element.html e inclua o código a seguir.
<link rel = "import" href = "bower_components/polymer/polymer-element.html">
<link rel = "import" href = "prop-element.html">
//it specifies the start of an element's local DOM
<dom-module id = "my-element">
<template>
<prop-element my-prop="{{demoProp}}"></prop-element>
<p>
Present value: <span>{{demoProp}}</span>
</p>
</template>
<script>
Polymer ({
is: "my-element", properties: {
demoProp: String
}
});
</script>
</dom-module>Em seguida, crie mais um arquivo chamado prop-element.html e adicione o código a seguir.
//it specifies the start of an element's local DOM
<dom-module id = "prop-element">
<template>
<button on-click = "onClickFunc">Change value</button>
</template>
<script>
Polymer ({
is: "prop-element", properties: {
myProp: {
type: String,
notify: true,
readOnly: true,
value: 'This is initial value...'
}
},
onClickFunc: function(){
this._setMyProp('This is new value after clicking the button...');
}
});
</script>
</dom-module>Resultado
Execute o aplicativo conforme mostrado nos capítulos anteriores e navegue até http://127.0.0.1:8081/. A seguir será a saída.
Após clicar no botão, ele mudará o valor conforme mostrado na imagem a seguir.
Vinculando dois caminhos
Você pode vincular os dois caminhos ao mesmo objeto usando o método linkPaths e precisa usar a vinculação de dados para gerar alterações entre os elementos.
Exemplo
linkPaths('myTeam', 'players.5');A ligação do caminho pode ser removida usando o método unlinkPaths conforme mostrado abaixo -
unlinkPaths('myTeam');Observadores
As alterações observáveis que ocorrem nos dados do elemento invocam métodos conhecidos como observadores. A seguir estão os tipos de observadores.
Observadores simples são usados para observar uma única propriedade.
Observadores complexos são usados para observar mais de uma propriedade ou caminho.
Ligação de dados
A vinculação de dados pode ser usada para conectar a propriedade ou um atributo de um elemento do elemento host em seu DOM local. A vinculação de dados pode ser criada adicionando anotações ao modelo DOM, conforme mostrado no código a seguir.
<dom-module id = "myhost-element">
<template>
<target-element target-property = "{{myhostProperty}}"></target-element>
</template>
</dom-module>A anatomia da ligação de dados no modelo DOM local se parece com o seguinte -
property-name=annotation-or-compound-bindingou
attribute-name$=annotation-or-compound-bindingO lado esquerdo da vinculação especifica a propriedade ou atributo de destino, enquanto o lado direito da vinculação especifica uma anotação de vinculação ou uma vinculação composta. O texto na anotação de ligação é delimitado por colchetes duplos ({{}}) ou colchetes ([[]]) delimitadores e a ligação composta inclui uma ou mais anotações de ligação literal de string.
A seguir estão os elementos auxiliares, que são usados com casos de uso de vinculação de dados -
Template Repeater - Uma instância do conteúdo do modelo pode ser criada para cada item em uma matriz.
Array Selector - Fornece o estado de seleção para uma série de dados estruturados.
Conditional Template - Você pode identificar o conteúdo, se a condição for verdadeira.
Auto-binding Template - Especifica a vinculação de dados fora do elemento de polímero.
A árvore DOM dispara um evento de mudança dom, se os elementos auxiliares atualizarem a árvore DOM. Às vezes, você pode interagir com o DOM alterando os dados do modelo, não interagindo com os nós criados. Portanto, você pode usar o evento dom-change para acessar os nós diretamente.