Knockout.js provides you with a huge number of useful HTML data bindings to control the text and its appearance. In Chapter 1, Introduction to Knockout.js, we discussed what bindings are and how we can use them. In this section, we take a brief look at the most common ones:
The
textbindingThe
htmlbindingThe
cssbindingThe
stylebindingThe
attrbindingThe
visiblebinding
The text binding is one of the most useful bindings. It allows us to bind text of an element (for example, span) to a property of the ViewModel. Let's create an example in which a person has a single firstName property (PersonalPage-Binding-Text1.html).
The Model will be as follows:
var person = {
firstName: "John"
};The ViewModel will be as follows:
var PersonViewModel = function() {
var self = this;
self.firstName = ko.observable(person.firstName);
};The View will be as follows:
The first name is <span data-bind="text: firstName"></span>.
It is really a very simple...