Cara Pengikatan Teks dan Penampilan berfungsi dalam KnockoutJs

Kandungan ini pada asasnya adalah terjemahan bahan asal. Hasratnya adalah untuk mempelajari tentang KnockoutJs untuk Magento 2 dan mencipta kandungan dalam bahasa Portugis tentang KnockouJs.

Dokumentasi

• Sintaks pengikat data
• Konteks mengikat
• Ikatan "kelihatan" dan "tersembunyi"
• Ikatan "teks"
• Ikatan "html"
• Ikatan "kelas" dan "css"
• Ikatan "gaya"
• Ikatan "attr"

---

Pengikatan

Dalam KnockoutJs, binding ialah cara untuk menyambung logik ViewModel (data dan logik perniagaan) dengan View (HTML). Ringkasnya, melalui binding antara muka pengguna secara automatik mencerminkan perubahan dalam data anda, tanpa perlu memanipulasi DOM secara langsung.

Binding dalam KnockoutJs berfungsi melalui atribut data-bind pada elemen HTML. Atribut ini ialah tempat anda menentukan pengikatan yang anda mahu gunakan dan nilai yang berkaitan.

Mengawal Teks dan Rupa

Kelihatan

ikatan boleh dilihat digunakan untuk mengawal keterlihatan elemen HTML berdasarkan nilai boleh diperhatikan dalam ViewModelnya. Ia membenarkan anda untuk menunjukkan atau menyembunyikan elemen berdasarkan keadaan tertentu yang ditakrifkan dalam ViewModel anda.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Apabila keadaan adalah nilai yang serupa dengan palsu (palsu, 0, batal atau tidak ditentukan), ikatan yang boleh dilihat menetapkan gaya kepada tiada, menyebabkan ia disembunyikan. Ini mengambil keutamaan berbanding mana-mana gaya paparan yang boleh anda tetapkan menggunakan CSS.

Tersembunyi

binding hidden digunakan untuk menyembunyikan elemen HTML berdasarkan nilai observable daripada ViewModel anda. Tidak seperti pengikatan *kelihatan*, yang mengawal keterlihatan elemen, pengikatan *tersembunyi* menyembunyikan elemen UI apabila syarat yang ditentukan dipenuhi.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Teks

Teks mengikat digunakan untuk mengemas kini kandungan elemen HTML dengan nilai boleh diperhatikan daripada ViewModelnya. Ia membenarkan teks boleh diperhatikan untuk dimasukkan terus ke dalam elemen HTML, memastikan bahawa sebarang perubahan dalam nilai boleh diperhatikan secara automatik ditunjukkan dalam teks yang dipaparkan.

<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>

Jika parameter ini ialah nilai boleh diperhatikan, pengikatan akan mengemas kini teks elemen apabila nilai berubah. Jika parameter tidak boleh diperhatikan, ia akan menetapkan teks elemen sekali sahaja dan tidak akan mengemas kininya lagi kemudian.

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.

HTML

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().

Class

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.

CSS

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.

Style

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.

• { 'font-weight': someValue }
• { fontWeight: someValue }

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.

Attr

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.

Atas ialah kandungan terperinci Cara Pengikatan Teks dan Penampilan berfungsi dalam KnockoutJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!