KnockoutJS – Controlling text and appearance

Thiyagu

6 years ago

The “text” binding

The text binding causes the associated DOM element to display the text value of our parameter. This is used in text-level DOM elements such as div,span. The text binding accepts any data type and parses it into String before rendering it.

Syntax:

text: <binding-value>

Parameters

Knockout sets the element’s content to a text node with your parameter value. And if there is any previous content then it will be overwritten.
If this parameter is an observable value, then the binding value will update the element’s text whenever the value changes. If the parameter isn’t observable then it will only set the element’s text once and will not update again.

Example

<html>
<head>
<title>KnockoutJS Computed Observables</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
</head>
<body>
<span data-bind="text: myMessage1"></span><br /><br />
<span data-bind="text: myMessage"></span>

<script type="text/javascript">
var MyModel = {
myMessage: ko.observable("myMessage: IntialMessage"),
myMessage1: ko.observable("IntialMessage - Welcome to dotnet-helpers.com")
};

MyModel.myMessage("myMessage1 : Welcome to KO Learning curve session");
ko.applyBindings(MyModel);
</script>
</body>

<html>

<head>

<title>KnockoutJS Computed Observables</title>

</head>

<body>

var MyModel = {

myMessage: ko.observable("myMessage: IntialMessage"),

myMessage1: ko.observable("IntialMessage - Welcome to dotnet-helpers.com")

};

MyModel.myMessage("myMessage1 : Welcome to KO Learning curve session");

ko.applyBindings(MyModel);

</script>

</body>

OUTPUT

What do you think?

I hope you have idea of Controlling text and appearance. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.