How Text and Appearance Bindings work in KnockoutJs

This content is basically a translation of the original materials. The intention is to learn about KnockoutJs for Magento 2 and create content in Portuguese about KnockouJs.

Documentation

• The data-bind syntax
• Binding context
• The "visible" and "hidden" bindings
• The "text" binding
• The "html" binding
• The "class" and "css" bindings
• The "style" binding
• The "attr" binding

---

Bindings

In KnockoutJs, bindings are the way to connect the logic of the ViewModel (the data and business logic) with the View (HTML). In short, it is through bindings that the user interface automatically reflects changes in your data, without the need to directly manipulate the DOM.

Bindings in KnockoutJs work through the data-bind attribute on HTML elements. This attribute is where you specify the binding you want to use and the associated values.

Controlling Text and Appearance

Visible

The binding visible is used to control the visibility of HTML elements based on the value of an observable in its ViewModel. It allows you to show or hide elements based on a specific condition defined in your ViewModel.

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

When the condition is a value similar to false (false, 0, null or undefined), the visible binding sets the style to none, causing it to be hidden. This takes priority over any display style you can set using CSS.

Hidden

binding hidden is used to hide HTML elements based on the value of an observable from your ViewModel. Unlike the *visible* binding, which controls the visibility of elements, the *hidden* binding hides UI elements when the specified condition is met.

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

Text

The binding text is used to update the content of HTML elements with the value of an observable from its ViewModel. It allows the text of an observable to be inserted directly into the HTML element, ensuring that any change in the value of the observable is automatically reflected in the displayed text.

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

If this parameter is an observable value, the binding will update the element's text whenever the value changes. If the parameter is not observable, it will set the element text only once and will not update it again later.

If the value provided is something other than a number or a string, the displayed text will be equivalent to yourParameter.toString().

Because this binding sets its text value using a text node, it is safe to set any string value without risking HTML or script injection.

HTML

binding html is used to insert dynamic HTML content into your UI elements. It allows the content of an element to be updated with the HTML generated from an observable or an expression from its ViewModel.

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

KnockoutJs clears the previous content and then sets the element content to the parameter value using jQuery's html function or parsing the string into HTML nodes and attaching each node as a child of the element, if jQuery is not available.

If this parameter is an observable, the binding will update the element's content whenever the value changes. If the parameter is not observable, it will set the element's content only once and will not update it again later.

If the value provided is something other than a number or a string, the text displayed will be equivalent to yourParameter.toString().

Class

The binding class is used to control CSS classes applied to HTML elements based on the value of an observable or an expression of its ViewModel. This allows you to dynamically change an element's CSS classes based on different conditions or states of your application. A class is not a legal identifier name, the correct way to assign a class to an HTML element is to enclose the identifier name in quotation marks so that it becomes a literal string.

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

The parameter value must be a string that corresponds to the CSS class(es) that you would like to add to the element. If the parameter references an observable, the binding updates the classes whenever the value changes, removing any previously added classes and adding the new value's class or classes.

CSS

binding css is used to dynamically apply CSS styles to HTML elements based on the value of an observable or an expression of its ViewModel. This allows you to change an element's visual styles based on different conditions or states of your application. You can define multiple CSS classes based on the same condition by enclosing the names in quotation marks.

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

A JavaScript object must be passed in which the property names are your CSS classes and their values ​​evaluate to true or false depending on whether the class should be applied at the time.

If the parameter references an observable value, the binding will add or remove the CSS class whenever the observable changes. If the parameter does not reference an observable, it will add or remove the class only once and will not do so again later.

style

The binding style is used to apply inline CSS styles to HTML elements based on the value of an observable or an expression of its ViewModel. This allows you to change an element's visual styles directly inline, based on different conditions or states of your application.

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

A JavaScript object must be passed in which the property names correspond to the style names and the values ​​correspond to the values ​​of the styles you want to apply.

If the parameter references an observable, the binding will update the styles whenever the observable changes. If the parameter does not reference an observable, it will only set the styles once and not update them later.

If you want to apply a style whose name is not a legal JavaScript identifier (because it contains a hyphen or something like that), you can enclose it in quotation marks or use the name with the camelCase style.

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

If you apply a simple numeric value to a style that requires a unit, KnockoutJs will append px to the value before setting the style.

Attr

The binding attr is used to set or update HTML attributes on elements based on the value of an observable or a ViewModel expression. This allows you to change the attributes of HTML elements dynamically, based on different conditions or states of your application.

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

A JavaScript object must be passed in which the property names correspond to the attribute names and the values ​​correspond to the values ​​of the attributes you want to apply.

If the parameter references an observable, the binding will update the attribute whenever the observable changes. If the parameter does not reference an observable, it only sets the attribute once and does not update it later.

The above is the detailed content of How Text and Appearance Bindings work in KnockoutJs. For more information, please follow other related articles on the PHP Chinese website!