Dados de Ligação e Opções de Configuração

Uma visualização pode ser associada a uma ligação de dados e opções de configuração. O contexto de visualização fornece acesso a estes dados. Para acessar a ligação de dados e opções de configuração que você deve utilizar o JavaScript get e funções definidas. é possível utilizar notação de JavaScript.

context.binding

O objeto de ligação, se definido, fornece acesso a dados que é ligado a uma visualização. Existe no máximo uma ligação de dados declarados para cada visualização.

É possível acessar dados ligados a uma visualização usando a construção: this.context.binding.get("value"), em que value é um nome de propriedade especial que retorna a ligação de dados. Por exemplo, se uma visualização estiver ligada ao local.phoneBook.title, então a visualização pode obter o título da agenda de telefones da seguinte forma:


if (!! this.context.binding){
var title = this.context.binding.get("value")
}
A principal razão para as visualizações para ligar dados a é para que a visualização pode ser notificado se os dados bound foi modificado. O estrutura de visualização detecta alterações de dados no objeto ligado e notifica automaticamente a visualização chamando sua função de manipulador de eventos change. É importante observar que essas notificações serão enviadas para a visualização apenas se o próprio objeto de ligação de alterações, mas não se qualquer uma das suas propriedades ou sub-alterar as propriedades. As seções a seguir discutem os tipos de dados diferentes e esboçar os casos em que o código adicional é requerido para a visualização para receber a notificação de uma alteração de dados.

Ligando a tipos de dados simples e complexos

Para os tipos de dados simples, como cadeias e números, a estrutura de visualização detecta alterações dos dados e notifica automaticamente a visualização da alteração. Por exemplo, quando uma visualização é ligada ao tipo simples de sequência local.phoneBook.title, a função change() da visualização é chamada com um evento de mudança que especifica que o título foi alterado e seu novo valor. Todas as visualizações que estão ligadas a local.phoneBook.title são notificadas.

Para tipos de dados complexos tais como objetos de negócios, a visualização será notificado apenas se o próprio objeto de ligação de alterações, mas não se qualquer uma de suas propriedades ou sub-alterar as propriedades. Por exemplo, suponha que a visualização esteja ligada a um objeto complexo local.phoneBook, não a um tipo simples como uma sequência. O objeto phoneBook tem várias propriedades, um dos quais é title. Se houver uma alteração na propriedade title , a função de alteração não for chamado, porque a visualização é ligada ao objeto phoneBook , não a propriedade title . A função de mudança só é chamada se todo o objeto phoneBook for alterado. Se você precisar de uma visualização para saber se uma propriedade de um objeto complexo mudou, deve-se ligar manualmente a visualização à propriedade usando a função bind() ou bindAll(). Observe que é possível usar as funções bind() e bindAll() da mesma maneira para as opções de configuração.
Importante: A função bindAll() manipula somente um nível de profundidade na árvore de objetos, portanto, se o objeto tiver vários níveis (objetos aninhados), a visualização precisará chamar bindAll() tempo múltiplo para cada nível de objeto.
bind(path, callback, [scope])
Notifica a visualização por meio de retorno se uma propriedade especificada foi alterado. Escopo é um parâmetro opcional que especifica o escopo do contexto do retorno de chamada. Retorna uma manipulação para o retorno de chamada.
bindAll(callback, [scope])
Notifica a visualização por meio de retorno se qualquer propriedade no objeto foi alterado. Escopo é um parâmetro opcional que especifica o escopo do contexto do retorno de chamada. Retorna uma manipulação para o retorno de chamada.

Para a assinatura de retorno de chamada, consulte o tópico function (event) .

O exemplo a seguir mostra o código que você pode incluir em um manipulador de eventos para ligar manualmente de carregamento da visualização propriedades de um objeto complexo :
   var binding = this.context.binding.get("value");  //this is a complex object
   this.property2Handle = binding.bind("property1.property2", function(e) {some code}, this);
   this.property3Handle = binding.get("property3").bindAll(this.myBindAllChangeHandler, this);
   ......
   this.mybindAllChangeHandler(event) { .....};
No exemplo, a visualização está ligada a um objeto complexo e configura um manipulador de alteração para ser notificado se binding.property1.property2 (que é uma cadeia) as alterações. Também conjuntos de alterações para ser notificado se algum manipulador de outra sub-propriedade do property3 alterações. Em ambos os casos, o escopo no qual o manipulador de mudança é chamado é o escopo this da visualização.

Ligando a um tipo de lista

Quando você ligar à uma lista, a visualização será automaticamente notificado quando o objeto Lista de toda a alterações. Por exemplo, considere que a visualização está ligada à lista local.phoneBook.person[]. Se uma nova lista de pessoas for criada e configurada para a ligação da visualização, por exemplo, usando a sintaxe do script de servidor tw.local.phoneBook.person = new tw.object.listOf.person();, a estrutura notifica automaticamente a visualização da alteração.

Ligando a lista de atualizações

Para ser notificado quando um elemento é incluída, removida ou substituída, deve-se ligar manualmente a visualização utilizando a função bindAll() . No exemplo de código a seguir, a função listUpdated da visualização é chamada sempre que um elemento da lista é incluído, removido ou substituído.
var binding = this.context.binding.get("value"); //this is a List object
this.bindAllHandle = binding.bindAll(this.listUpdated, this);

Ligando a lista de propriedades

Além dos elementos de uma lista, uma lista também possui propriedades especiais, como uma propriedade que define os elementos da lista que são selecionados por um usuário. As propriedades especiais são descritas na tabela a seguir.
Tabela 1. propriedades especiais de uma lista
Propriedade Tipo Descrição
listAllSelectedIndices Matriz Os índices dos elementos da lista que são selecionados por um usuário. Pode haver mais de um índice selecionado. Ao configurar listAllSelectedIndices, você transmite os índices para uma matriz. Utilize listAllSelectedIndices ao atualizar a lista de seleção.
listAllSelected Matriz Uma matriz de todos os elementos que um usuário tenha selecionado. Utilize listAllSelected para assinar uma alteração para esta propriedade. Esta propriedade é somente leitura.
listSelectedIndex Número Inteiro O índice do elemento selecionado. Este valor corresponde ao valor do elemento de índice 0 da matriz listAllSelectedIndices. Utilize listSelectedIndex para assinar uma alteração para esta propriedade. Esta propriedade é somente leitura.
listSelected Objeto O elemento selecionado. Este valor corresponde ao valor do elemento de índice 0 da matriz listAllSelected. Utilize listSelected para assinar uma alteração para esta propriedade. Esta propriedade é somente leitura.
O bindAll() função não incluir essas propriedades especiais.
Para receber a notificação de uma alteração em uma propriedade especial, você pode assinar a propriedade individual utilizando a função bind() . Em geral, é suficiente para assinar uma propriedade especial (ou seja, ele não é necessário para assinar todas as propriedades especiais). O código de exemplo a seguir poderia ser incluída em um manipulador de eventos de carregamento para chamar uma visualização da função indicesChanged sempre que o valor de listAllSelectedIndices alterações.
var binding = this.context.binding.get("value"); //this is a list
this.selectedIndicesHandle = binding.bind("listAllSelectedIndices", this.indicesChanged, this);

Acessando elementos da lista

As listas são uma coleta de tipos de objetos simples ou complexos com propriedades. Utilize a notação a seguir para obter dados a partir de uma lista:
  • Use get("value") para obter o objeto da lista. Por exemplo: list = this.context.binding.get("value")
  • Use get(index) para obter o elemento indexado. Por exemplo: list.get(0) para obter o primeiro elemento.
  • Use get(property) para obter o valor da propriedade. Por exemplo: list.get("listSelected") para obter o valor da propriedade listSelected. Use a sintaxe semelhante ao obter os valores de todas as outras propriedades.
  • Use items para obter uma matriz que representa os elementos subjacentes da lista. Por exemplo, list.items. Os dados retornados por items não devem ser modificados.

Lista de operações

As seguintes APIs são utilizados para modificar uma lista e para obter informações sobre uma lista.
  • Para incluir um objeto, use list.add(item). Por exemplo, this.context.binding.get("value").add(item)
  • Para remover um objeto, use list.remove(index), por exemplo, this.context.binding.get("value").remove(0)
  • Para substituir um objeto, use list.put(index, item). Por exemplo, this.context.binding.get("value").put(0, item)
  • Para obter o comprimento de uma lista, use list.length().
  • Para obter um elemento ou propriedade indexada da lista, use list.get(index | property). Consulte Acessando os elementos da lista anteriormente
  • Para atualizar programaticamente a propriedade selecionada na lista, utilize list.set(property). Por exemplo, this.context.binding.get("value").set("listAllSelectedIndices", [1, 2, 3]);

Limpando recursos ligados

Quando uma ligação não for mais necessário, você poderá liberar os recursos vinculados. Cada função bind ou bindAll retorna um identificador que pode ser usado para limpar a ligação. É necessário liberar os recursos ligados no manipulador de eventos unload() ou cada vez que todo o objeto de ligação for alterado. Quando ocorre uma alteração de dados de ligação, uma visualização precisa desvincular a ligação manual e religar ao objeto context.binding ao chamar bind e bindAll novamente. Por exemplo, inclua o seguinte código no manipulador de eventos de alteração :
if (event.type != "config"){
var binding = this.context.binding.get("value"); //this is a list
	// assumes that this.selectedIndicesHandle was initialized in the load function
  this.selectedIndicesHandle.unbind();
this.selectedIndicesHandle = binding.bind("listAllSelectedIndices", this.indicesChanged, this);
	// assumes that this.selectedIndicesHandle was initialized in the load function
this.bindAllHandle.unbind();
this.bindAllHandle = binding.bindAll(this.listUpdated, this);

}

Opções de configuração

Além de dados, visualizações também pode ser ligado a opções de configuração. Uma visualização pode ter várias opções de configuração. Por exemplo, a etiqueta de um controle de botão é uma propriedade de configuração. Os valores para a configuração pode ser recuperado utilizando a visualização do objeto this.context.options . O objeto context.options contém uma propriedade de metadados predefinida além das propriedades definidas pelo usuário que são configuráveis para uma visualização.
Tabela 2. opções de configuração predefinida de uma visualização
Opção Tipo Descrição
rótulo Sequência O valor da etiqueta da visualização, se um existir
visibilidade Sequência As configurações de visibilidade para a visualização. Os valores válidos são: "DEFAULT" | ' "EDITABLE" | ' "REQUIRED" | ' "READONLY" | ' "NONE" | ' "HIDDEN". Consulte O objeto de contexto. DEFAULT é o código equivalente ao " Same as parent que os usuários veem na tela em uma lista de visibilidade.
Importante: as tabelas têm uma propriedade de configuração Desativar clique para editar O valor padrão é false, o que significa que as visualizações contidas nessa tabela usam as configurações de visibilidade da tabela. Isto é, as visualizações em uma determinada célula são READONLY até que o usuário clique na célula. As visualizações são, então, EDITABLE até que o usuário clique em qualquer lugar fora da célula. As visualizações são revertidas para serem READONLY. Quando Desativar clique para editar é true, essas visualizações usam suas próprias configurações de visibilidade.
Importante: a configuração da visibilidade para REQUIRED não valida se um usuário inseriu ou configurou um valor Deve-se fornecer o código que faz essa verificação, por exemplo, implementando um serviço de validação para o coach que contém a visualização.
labelVisibility Sequência O configurações de visibilidade para o rótulo. Os valores válidos são "SHOW" | "HIDE".
helpText Sequência A visualização pode utilizar esta propriedade como hover de texto
className Sequência O(s) nome(s) de classe CSS especificado(s). Normalmente, uma visualização não precisa usar isso, pois os nomes de classe CSS são inseridos no atributo DOM da visualização.
htmlOverrides Mapa Um par nome-valor de mapa que representa o atributo HTML especificado. Os pares nome-valor são inseridos no atributo DOM da visualização.
As opções de configuração são acessados e atualizados da mesma forma que a ligação de dados. Por exemplo:
  • Para obter opções predefinidas da visualização, use this.context.options._metadata.*. Por exemplo, para obter a opção a visibilidade da visualização, use this.context.options._metadata.visibility.get("value");
  • Para configurar opções predefinidas de uma visualização, use this.context.options._metadata.*. Por exemplo, para configurar uma opção de visibilidade da visualização, use this.context.options._metadata.visibility.set("value", newValue);
  • Para obter uma opção de configuração definido pelo usuário, use this.context.options.myOption.get("value");, em que myOption é o nome da opção.
  • Para configurar uma opção de configuração definida pelo usuário, use this.context.options.myOption.set("value", newValue);, em que myOption é o nome da opção.

Para serializar o objeto de ligação de dados para uma sequência JSON, é possível chamar a função toJson() no objeto de ligação de dados. Para obter um objeto JavaScript básico que represente a ligação de dados, é possível chamar toJSObject().