此內容基本上是原始資料的翻譯。目的是了解 Magento 2 的 KnockoutJs 並用葡萄牙語創建有關 KnockouJs 的內容。
在 KnockoutJs 中，綁定 是連接 ViewModel 邏輯（資料和業務邏輯）與 View (HTML) 的方式。簡而言之，正是透過 綁定，使用者介面自動反映資料的變化，而不需要直接操作 DOM。
KnockoutJ 中的綁定透過 HTML 元素上的 data-bind 屬性進行工作。您可以在該屬性中指定要使用的綁定和關聯值。
綁定 可見性用於根據 ViewModel 中 observable 的值來控制 HTML 元素的可見性。它允許您根據 ViewModel.
中定義的特定條件顯示或隱藏元素
<div> <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p> </div>
當條件是類似於 false 的值（false、0、null 或 undefined）時，可見綁定將樣式設為 none，從而使其隱藏。這優先於您可以使用 CSS 設定的任何顯示樣式。
綁定 hide 用於根據 ViewModel 中 observable 的值隱藏 HTML 元素。與控制元素可見性的 *visible* 綁定不同，*hidden* 綁定會在滿足指定條件時隱藏 UI 元素。
<div> <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p> </div>
綁定文字用於使用其ViewModel中的observable值來更新HTML元素的內容。它允許將 observable 的文字直接插入 HTML 元素中，確保 observable 值的任何變更都會自動反映在顯示的文字中。
<div>
<p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
<p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
<p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>
如果此參數是一個可觀察值，則只要該值發生變化，綁定就會更新元素的文字。如果參數不是observable，則只會設定元素文字一次，以後不會再更新
Se o valor fornecido for algo diferente de um número ou uma string, o texto exibido será equivalente a yourParameter.toString().
Como essa ligação define seu valor de texto usando um nó de texto, é seguro definir qualquer valor de string sem arriscar HTML ou injeção de script.
O binding html é usado para inserir conteúdo HTML dinâmico em elementos da sua interface do usuário. Ele permite que seja atualizado o conteúdo de um elemento com o HTML gerado a partir de um observable ou de uma expressão da sua ViewModel.
<div> <p data-bind="html: dynamicHtml">Este parágrafo exibirá o conteúdo HTML do observable 'dynamicHtml'.</p> </div>
O KnockoutJs limpa o conteúdo anterior e, em seguida, define o conteúdo do elemento para o valor do parâmetro usando a função html do jQuery ou analisando a string em nós HTML e anexando cada nó como um filho do elemento, se o jQuery não estiver disponível.
Se este parâmetro for um observable, a ligação atualizará o conteúdo do elemento sempre que o valor for alterado. Se o parâmetro não for observable, ele definirá o conteúdo do elemento apenas uma vez e não o atualizará novamente posteriormente.
Se o valor fornecido for algo diferente de um número ou uma string, o texto exibido será equivalente a yourParameter.toString().
O binding class é usado para controlar as classes CSS aplicadas a elementos HTML com base no valor de um observable ou de uma expressão da sua ViewModel. Isso permite que seja alterado dinamicamente as classes CSS de um elemento com base em diferentes condições ou estados do seu aplicativo. Uma classe não é um nome de identificador legal, o correto para atribuir uma classe a um elemento HTML é colocar o nome do identificador entre aspas para que se torne uma string literal.
<div>
<p data-bind="class: { 'active': isActive, 'highlight': shouldHighlight }">Este parágrafo terá as classes 'active' e 'highlight' com base nos valores dos observables 'isActive' e 'shouldHighlight'.</p>
<p data-bind="class: { 'error': hasError(), 'warning': hasWarning() }">Este parágrafo terá a classe 'error' se hasError() for true, e terá a classe 'warning' se hasWarning() for true.</p>
<p data-bind="class: 'static-class dynamic-class'">Este parágrafo terá a classe 'static-class' e 'dynamic-class' aplicadas a ele.</p>
</div>
O valor do parâmetro deve ser uma string que corresponda à classe(s) CSS que seria desejado adicionar ao elemento. Se o parâmetro fizer referência a um observable, a associação atualizará as classes sempre que o valor for alterado, removendo quaisquer classes adicionadas anteriormente e adicionando a classe ou classes do novo valor.
O binding css é usado para aplicar estilos CSS dinamicamente a elementos HTML com base no valor de um observable ou de uma expressão da sua ViewModel. Isso permite que seja alterado os estilos visuais de um elemento com base em diferentes condições ou estados do seu aplicativo. É possível definir várias classes CSS com base na mesma condição colocando os nomes entre aspas.
<div>
<p data-bind="css: { 'active': isActive, 'highlight': shouldHighlight }">Este parágrafo terá os estilos CSS 'active' e 'highlight' com base nos valores dos observables 'isActive' e 'shouldHighlight'.</p>
<p data-bind="css: { 'error': hasError(), 'warning': hasWarning() }">Este parágrafo terá o estilo 'error' se hasError() for true, e terá o estilo 'warning' se hasWarning() for true.</p>
<p data-bind="css: 'static-style dynamic-style'">Este parágrafo terá o estilo 'static-style' e 'dynamic-style' aplicados a ele.</p>
</div>
Deve ser passado um objeto JavaScript no qual os nomes das propriedades são suas classes CSS e seus valores são avaliados como true ou false, dependendo se a classe deve ser aplicada no momento.
Se o parâmetro fizer referência a um valor observable, a ligação adicionará ou removerá a classe CSS sempre que o observable for alterado. Se o parâmetro não fizer referência a um observable, ele adicionará ou removerá a classe apenas uma vez e não o fará novamente posteriormente.
O binding style é usado para aplicar estilos CSS inline a elementos HTML com base no valor de um observable ou de uma expressão da sua ViewModel. Isso permite que seja alterado os estilos visuais de um elemento diretamente em linha, com base em diferentes condições ou estados do seu aplicativo.
<div>
<p data-bind="style: { 'color': textColor(), 'font-size': fontSize() + 'px' }">Este parágrafo terá cores e tamanhos de fonte diferentes com base nos valores dos observables 'textColor' e 'fontSize'.</p>
<p data-bind="style: { 'color': textColor(), 'font-size': fontSize() + 'px' }">Este parágrafo terá cores e tamanhos de fonte diferentes com base nos valores dos observables 'textColor' e 'fontSize'.</p>
<p data-bind="style: { 'width': width() + 'px', 'height': height() + 'px' }">Este parágrafo terá largura e altura diferentes com base nos valores dos observables 'width' e 'height'.</p>
<p data-bind="style: 'color: red; background-color: ' + bgColor()">Este parágrafo terá cor de texto vermelha e cor de fundo dinâmica com base no valor do observable 'bgColor'.</p>
</div>
Deve ser passado um objeto JavaScript no qual os nomes das propriedades correspondem aos nomes dos estilos e os valores correspondem aos valores dos estilos que é desejado aplicar.
Se o parâmetro fizer referência a um observable, a ligação atualizará os estilos sempre que o observable for alterado. Se o parâmetro não fizer referência a um observable, ele definirá os estilos apenas uma vez e não os atualizará posteriormente.
Se é desejado aplicar um estilo cujo nome não é um identificador JavaScript legal (porque contém um hífen ou algo do genêro), é possível colocá-lo entre aspas ou usar o nome com o estilo camelCase.
Se aplicar um valor numérico simples a um estilo que requer uma unidade, o KnockoutJs acrescentará px ao valor antes de definir o estilo.
O binding attr é usado para definir ou atualizar atributos HTML em elementos com base no valor de um observable ou de uma expressão da ViewModel. Isso permite que seja alterado os atributos de elementos HTML de forma dinâmica, com base em diferentes condições ou estados do seu aplicativo.
<div>
<input type="text" data-bind="attr: { 'disabled': isDisabled(), 'placeholder': inputPlaceholder }" />
<img data-bind="attr: { 'src': 'images/' + imageName(), 'alt': 'Imagem ' + imageIndex() }" />
<a data-bind="attr: { 'href': 'https://www.exemplo.com/' + pageLink() }">Clique aqui</a>
<div data-bind="attr: { 'data-something': someValue }">...</div>
</div>
Deve ser passado um objeto JavaScript no qual os nomes das propriedades correspondem aos nomes dos atributos e os valores correspondem aos valores dos atributos que seja desejado aplicar.
Se o parâmetro fizer referência a um observable, a ligação atualizará o atributo sempre que o observable for alterado. Se o parâmetro não fizer referência a um observable, ele definirá o atributo apenas uma vez e não o atualizará posteriormente.
以上是文字和外觀綁定在 KnockoutJs 中如何運作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
