knockout.js
Encuadernaciones - Texto y apariencia.

Texto

El enlace de text se puede utilizar con cualquier elemento para actualizar su texto interior.

<p>
  <span data-bind="text: greeting"></span>,
  <span data-bind="text: subject"></span>.
</p>

ko.applyBindings({
  greeting: ko.observable("Hello"),
  subject: ko.observable("world")
});

El enlace de text también se puede utilizar con elementos virtuales.

<p>
  <!--ko text: greeting--><!--/ko-->, 
  <!--ko text: subject--><!--/ko-->.
</p>

CSS

Este enlace aplicará la clase CSS suministrada al elemento. Las clases estáticas se aplican cuando las condiciones dadas se evalúan libremente como verdaderas. Las clases dinámicas utilizan el valor de un observable o computado.

page.html

<p data-bind="css: { danger: isInDanger }">Checks external expression</p>
<p data-bind="css: { danger: dangerLevel() > 10 }">Expression can be inline</p>
<p data-bind="css: { danger: isInDanger, glow: shouldGlow }">Multiple classes</p>
<p data-bind="css: dynamicObservable">Dynamic CSS class from observable</p>
<p data-bind="css: dynamicComputed">Dynamic CSS class from computed</p>

page.js

ko.applyBindings({
  isInDanger: ko.observable(true),
  dangerLevel: ko.observable(5),
  isHot: ko.observable(true),
  shouldGlow: ko.observable(true),  
  dynamicObservable: ko.observable('highlighted'),
  dynamicComputed: ko.computed(function() {
        var customClass = "";
        if(dangerLevel() >= 15 ) {
            customClass += " danger";
        }
        if(dangerLevel() >= 10) {
            customClass += " glow";
        }
        if(dangerLevel() >= 5) {
            customClass += " highlighted";
        }
        return customClass;
    });
});

page.css

.danger { background: red; }
.glow { box-shadow: 5px 5px 5px gold; }
.highlighted { color: purple; }

Ver también: documentación oficial .

Visible

Se puede utilizar para mostrar / ocultar elementos DOM. Similar a usar if , excepto que visible aún construirá el elemento y establecerá display:none .

<div data-bind="visible: shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>
 
<script type="text/javascript">
    var viewModel = {
        shouldShowMessage: ko.observable(true);
    };
</script>

Attr

Utilice el enlace attr para aplicar cualquier atributo adicional a su elemento. Más comúnmente utilizado para configurar un href, src o cualquier atributo de datos.

<img data-bind="attr: { src: url, title: title }"/>

var viewModel = {
    url: ko.observable("images/example.png"),
    title: "example title"
};

HTML

Este enlace actualiza el innerHTML del elemento utilizando jQuery.html() , si jQuery ha sido referenciado, de lo contrario, la lógica de análisis de KO. Puede ser útil si recupera HTML de una API, fuente RSS, etc. Tenga en cuenta el uso de esta etiqueta con el HTML de entrada del usuario.

page.html

<p>
  <span data-bind="html: demoLink"></span>
</p>

page.js

ko.applyBindings({
  demoLink: ko.observable("<a href='#'>Make a link</a>")
});