KnockoutJS - Vinculação de valor
Essa ligação é usada para vincular o valor do respectivo elemento DOM à propriedade ViewModel. Geralmente, isso é usado com elementos comoinput, selecte textarea. Isso é semelhante à vinculação de texto, com a diferença de que, na vinculação de valor, os dados podem ser alterados pelo usuário e o ViewModel os atualizará automaticamente.
Syntax
value: <binding-value>Parameters
A propriedade de valor do elemento HTML DOM é definida como o valor do parâmetro. Os valores anteriores serão substituídos.
Se o parâmetro for um valor observável, o valor dos elementos será atualizado conforme e quando o observável subjacente for alterado. O elemento é processado apenas uma vez se nenhum observável for usado.
valueUpdate é um parâmetro extra que também pode ser fornecido para recursos extras. KO usa eventos adicionais para detectar mudanças extras quando o parâmetro valueUpdate é usado na vinculação. A seguir estão alguns eventos comuns -
input - ViewModel é atualizado quando o valor do elemento de entrada muda.
keyup - ViewModel é atualizado quando a chave é liberada pelo usuário.
keypress - ViewModel é atualizado quando a chave é digitada.
afterkeydown - ViewModel continua atualizando assim que o usuário começa a digitar o caractere.
Example
Vejamos o exemplo a seguir, que demonstra o uso da vinculação de valor.
<!DOCTYPE html>
<head>
<title>KnockoutJS Value Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Enter your name:
<input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />
</p>
<p>Your name is : <span data-bind = "text: yourName"></span></p>
<script type = "text/javascript">
function ViewModel () {
this.yourName = ko.observable('');
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>Output
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em value-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
Os dados inseridos na caixa de texto são atualizados imediatamente devido ao uso de valueUpdate.
Observações
Recebendo atualizações de valor imediatamente de entradas
Se você deseja que o elemento de entrada forneça atualizações imediatas ao seu ViewModel, use a ligação textInput. É melhor do que as opções valueUpdate, levando em consideração o comportamento estranho dos navegadores.
Lidar com a lista suspensa (elementos <select>)
KO suporta lista suspensa (elementos <select>) de uma forma especial. A vinculação de valor e a vinculação de opções funcionam juntas, permitindo que você leia e grave valores, que são objetos JavaScript aleatórios e não apenas valores de String.
Usando valueAllowUnset com elementos <select>
Usando este parâmetro, é possível definir a propriedade do modelo com um valor que não existe realmente no elemento selecionado. Desta forma, pode-se manter a opção padrão em branco quando o menu suspenso de visualizações do usuário pela primeira vez.
Example
Vamos dar uma olhada no exemplo a seguir, no qual a opção valueAllowUnset é usada.
<!DOCTYPE html>
<head>
<title>KnockoutJS Value Binding - working with drop-down lists</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p>Select a City:
<select data-bind = " options: cities,
optionsCaption: 'Choose City...',
value: selectedCity,
valueAllowUnset: true"></select>
</p>
<script type = "text/javascript">
function ViewModel() {
this.cities = ko.observableArray(['Washington D.C.', 'Boston', 'Baltimore']);
selectedCity = ko.observable('Newark')
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>Output
Vamos realizar as seguintes etapas para ver como funciona o código acima -
Salve o código acima em value-bind-drop-down.htm Arquivo.
Abra este arquivo HTML em um navegador.
selectedCity é atribuído a um valor que não está presente na lista. Isso deixa o menu suspenso em branco pela primeira vez.
Atualizar valores de propriedade observáveis e não observáveis
KO é capaz de criar uma vinculação bidirecional se você usar o valor para vincular um elemento do formulário a uma propriedade Observable, de modo que as alterações entre eles sejam trocadas entre eles.
Se você usar uma propriedade não observável (uma string simples ou uma expressão JavaScript), então KO fará o seguinte -
Se você se referir a uma propriedade simples em ViewModel, KO definirá o estado inicial do elemento do formulário para o valor da propriedade. Se o elemento do formulário for alterado, o KO gravará de volta os novos valores na propriedade, mas não pode detectar nenhuma alteração na propriedade, tornando-a assim uma associação unilateral.
Se você se referir a algo que não é simples, como o resultado de uma comparação ou uma chamada de função, KO irá definir o estado inicial do elemento do formulário para esse valor, mas não pode escrever mais nenhuma alteração feita no elemento do formulário pelo usuário. Podemos chamar isso de definidor de valor único.
Example
O trecho de código a seguir mostra o uso de propriedades observáveis e não observáveis.
<!-- Two-way binding. Populates textbox; syncs both ways. -->
<p>First value: <input data-bind="value: firstVal" /></p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondVal" /></p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondVal.length > 8" /></p>
<script type = "text/javascript">
function viewModel() {
firstVal = ko.observable("hi there"), // Observable
secondVal = "Wats up!!!" // Not observable
};
</script>Usando vinculação de valor com a vinculação marcada
Se você incluir a vinculação de valor com a vinculação marcada, a vinculação de valor se comportará como a opção CHECKValue, que pode ser usada com a vinculação marcada. Ele controlará o valor usado para atualizar ViewModel.