knockout.js
Associazioni: testo e aspetto

Testo

Il bind del text può essere usato con qualsiasi elemento per aggiornarlo nel suo innerText.

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

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

Il binding del text può anche essere utilizzato con elementi virtuali.

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

CSS

Questa associazione applicherà la classe CSS fornita all'elemento. Le classi statiche vengono applicate quando le condizioni date vengono valutate in modo approssimativo su true. Le classi dinamiche usano il valore di un osservabile o calcolato.

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

Vedi anche: documentazione ufficiale .

Visibile

Può essere usato per mostrare / nascondere elementi DOM. È simile all'utilizzo if , ad eccezione di quella visible verrà comunque creato l'elemento e impostato 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

Usa il binding attr per applicare eventuali attributi aggiuntivi al tuo elemento. Più comunemente usato per impostare un href, src o qualsiasi attributo di dati.

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

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

HTML

Questo legame aggiorna il innerHTML dell'elemento usando jQuery.html() , se jQuery è stato referenziato, altrimenti, la logica di analisi di KO. Può essere utile se si recupera l'HTML da un'API, un feed RSS, ecc. Prestare attenzione all'utilizzo di questo tag con l'HTML di input dell'utente.

page.html

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

page.js

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