Dieser Inhalt ist im Grunde eine Übersetzung der Originalmaterialien. Ziel ist es, mehr über KnockoutJs für Magento 2 zu erfahren und Inhalte auf Portugiesisch über KnockouJs zu erstellen.
In KnockoutJs sind Bindungen die Möglichkeit, die Logik des ViewModel (die Daten- und Geschäftslogik) mit der Ansicht (HTML) zu verbinden. Kurz gesagt: Durch Bindungen spiegelt die Benutzeroberfläche automatisch Änderungen in Ihren Daten wider, ohne dass das DOM direkt manipuliert werden muss.
Bindungen in KnockoutJs funktionieren über das data-bind-Attribut für HTML-Elemente. In diesem Attribut geben Sie die Bindung an, die Sie verwenden möchten, und die zugehörigen Werte.
Die Bindung sichtbar wird verwendet, um die Sichtbarkeit von HTML-Elementen basierend auf dem Wert eines observable in seinem ViewModel zu steuern. Es ermöglicht Ihnen, Elemente basierend auf einer bestimmten Bedingung anzuzeigen oder auszublenden, die in Ihrem ViewModel.
definiert ist
<div> <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p> </div>
Wenn die Bedingung einen ähnlichen Wert wie „false“ hat (falsch, 0, null oder undefiniert), setzt die sichtbare Bindung den Stil auf „Keine“, wodurch er ausgeblendet wird. Dies hat Vorrang vor allen Anzeigestilen, die Sie mit CSS festlegen können.
Binding Hidden wird verwendet, um HTML-Elemente basierend auf dem Wert eines Observable aus Ihrem ViewModel auszublenden. Im Gegensatz zur *visible*-Bindung, die die Sichtbarkeit von Elementen steuert, verbirgt die *hidden*-Bindung UI-Elemente, wenn die angegebene Bedingung erfüllt ist.
<div> <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p> </div>
Der Binding-Text wird verwendet, um den Inhalt von HTML-Elementen mit dem Wert eines Observable aus seinem ViewModel zu aktualisieren. Dadurch kann der Text eines Observablen direkt in das HTML-Element eingefügt werden, wodurch sichergestellt wird, dass jede Änderung des Werts des Observablen automatisch im angezeigten Text widergespiegelt wird.
<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>
Wenn dieser Parameter ein beobachtbarer Wert ist, aktualisiert die Bindung den Text des Elements, wann immer sich der Wert ändert. Wenn der Parameter nicht observable ist, wird der Elementtext nur einmal festgelegt und später nicht erneut aktualisiert.
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.
Das obige ist der detaillierte Inhalt vonSo funktionieren Text- und Darstellungsbindungen in KnockoutJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
