2. Creating a Simple Knockout.js Application | Getting Started with Knockout.js for .NET Developers

Text and appearance bindings

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 text binding
The html binding
The css binding
The style binding
The attr binding
The visible binding

The text binding

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...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Getting Started with Knockout.js for .NET Developers

By : Andrey Ankshin

Getting Started with Knockout.js for .NET Developers

By: Andrey Ankshin

Overview of this book

Text and appearance bindings

The text binding

Getting Started with Knockout.js for .NET Developers

By : Andrey Ankshin

Getting Started with Knockout.js for .NET Developers

By: Andrey Ankshin

Overview of this book

Text and appearance bindings

The text binding

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access