knockout.js
Привязки - текст и внешний вид

Текст

Связывание text может использоваться с любым элементом, чтобы обновить его 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")
});

Связывание text также может использоваться с виртуальными элементами.

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

CSS

Эта привязка будет применять поставляемый класс CSS к элементу. Статические классы применяются, когда заданные условия свободно оцениваются как истинные. Динамические классы используют значение наблюдаемого или вычисленного.

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

См. Также: официальная документация .

видимый

Может использоваться для отображения / скрытия элементов DOM. Аналогично использованию if , за исключением того, что visible будет по-прежнему создавать элемент и устанавливать 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 для применения любых дополнительных атрибутов к вашему элементу. Чаще всего используется для установки href, src или любых атрибутов данных.

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

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

HTML

Это связывание обновляет innerHTML элемента с помощью jQuery.html() , если jQuery ссылается, иначе логика разбора KO. Это может быть полезно при извлечении HTML из API, RSS-канала и т. Д. Помните об использовании этого тега с пользовательским вводом HTML.

page.html

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

page.js

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