Knockout Test

Knockout Test

by rodneyjoyce

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>


<p class="bluestyle" data-bind="attr: { class: ClassStyle }">This should be red</p>

<p class="bluestyle" data-bind="attr: { class: ClassStyle() + 'italics'}">This should red in italics - can you not add a literal to a KN binding?</p>

CSS

.bluestyle
{
    color: blue;
}
.redstyle
{
    color: red;
}
.redstyleitalics
{
    color: red;
    font-style: italic;
}

JavaScript

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = ko.observable("Bert");

    this.ClassStyle = ko.observable("redstyle") 
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());