文本和外观绑定在 KnockoutJs 中如何工作

此内容基本上是原始材料的翻译。目的是了解 magento 2 的 knockoutjs 并用葡萄牙语创建有关 knockoujs 的内容。

文档

• 数据绑定语法
• 绑定上下文
• “可见”和“隐藏”绑定
• “文本”绑定
• “html”绑定
• “class”和“css”绑定
• “样式”绑定
• “attr”绑定

---

绑定

在 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，则只会设置元素文本一次，以后不会再次更新

如果提供的值不是数字或字符串，显示的文本将相当于 yourparameter.tostring()。

由于此绑定使用文本节点设置其文本值，因此可以安全地设置任何字符串值，而不会带来 html 或脚本注入的风险。

超文本标记语言

绑定 html 用于将动态 html 内容插入到 ui 元素中。它允许使用从 observable 生成的 html 或其 viewmodel.
的表达式来更新元素的内容

<div>
  <p data-bind="html: dynamichtml">este parágrafo exibirá o conteúdo html do observable 'dynamichtml'.</p>
</div>

knockoutjs 清除之前的内容，然后使用 jquery 的 html 函数将元素内容设置为参数值，或者将 string 解析为 html 节点并将每个节点附加为元素的子级（如果 jquery 不是）可用。

如果此参数是一个可观察，则只要值发生变化，绑定就会更新元素的内容。如果参数不是observable，则只会设置该元素的内容一次，以后不会再次更新

如果提供的值不是数字或字符串，显示的文本将相当于 yourparameter.tostring()。

班级

绑定类用于根据observable的值或其viewmodel的表达式来控制应用于html元素的css类。这允许您根据应用程序的不同条件或状态动态更改元素的 css 类。类不是合法的标识符名称，将类分配给 html 元素的正确方法是将标识符名称放在引号中，使其成为文字 string.

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

参数值必须是与您要添加到元素的 css 类相对应的 字符串。如果参数引用 observable，则只要值更改，绑定就会更新类，删除任何先前添加的类并添加新值的一个或多个类。

css

绑定 css 用于根据 observable 的值或其 viewmodel 的表达式动态地将 css 样式应用到 html 元素。这允许您根据应用程序的不同条件或状态更改元素的视觉样式。您可以根据相同的条件定义多个 css 类，方法是将名称括在引号中。

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

必须传递一个 javascript 对象，其中属性名称是您的 css 类，其值根据当时是否应应用该类而评估为 true 或 false。

如果参数引用 observable 值，则只要 observable 发生更改，绑定就会添加或删除 css 类。如果参数没有引用 observable，它只会添加或删除该类一次，并且以后不会再这样做。

风格

绑定样式用于根据observable的值或其viewmodel的表达式将内联css样式应用于html元素。这允许您根据应用程序的不同条件或状态直接内联更改元素的视觉样式。

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

必须传递一个 javascript 对象，其中属性名称与样式名称相对应，值与要应用的样式的值相对应。

如果参数引用 observable，只要 observable 发生变化，绑定就会更新样式。如果参数没有引用 observable，它只会设置一次样式，以后不会更新它们。

如果您想应用名称不是合法 javascript 标识符的样式（因为它包含连字符或类似内容），您可以将其括在引号中或使用带有 camelcase 的名称风格。

{ '字体粗细': somevalue }
{ fontweight: somevalue }

如果您将简单的数值应用于需要单位的样式，knockoutjs 会在设置样式之前将 px 附加到该值。

属性

绑定属性用于根据observable或viewmodel表达式的值设置或更新元素上的html属性。这允许您根据应用程序的不同条件或状态动态更改 html 元素的属性。

<div>
  <input type="text" data-bind="attr: { 'disabled': isDisabled(), 'placeholder': inputPlaceholder }" />
    @@##@@
    <a data-bind="attr: { 'href': 'https://www.exemplo.com/' + pageLink() }">Clique aqui</a>
    <div data-bind="attr: { 'data-something': someValue }">...</div>
</div>

必须传递一个 javascript 对象，其中属性名称与属性名称相对应，值与要应用的属性的值相对应。

如果参数引用

observable，则只要 observable 更改，绑定就会更新属性。如果参数没有引用 observable，它只会设置该属性一次，以后不会更新。

以上就是文本和外观绑定在 KnockoutJs 中如何工作的详细内容，更多请关注硕下网其它相关文章！