Tag Archives: KnockoutJS Environment Setup – Learn KnockoutJS in simple and easy steps starting from basic to advanced concepts with examples including Overview

knockout

KnockoutJS – Controlling text and appearance

Leave a comment

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>

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.

 

knockout

KnockoutJS – Environment Setup

Leave a comment

It’s very easy to use KnockoutJS in our project by Simply referring the KnockoutJS Javascript file within the <script > tag in HTML pages like other script reference. We can access the Knockout.js in different ways like below

Referring Internally:

We can download latest version of the Knockout.js from its official website and add to our solution for making reference within out project.

<script type='text/javascript' src='knockout-3.3.0.js'></script>

Referring Externally:

We can refer the KnockoutJS library from CDNs and this can be achieved by following way.

Refering from KnockoutJS library from Microsoft Ajax CDN like below.

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>

In another way can refer to a minified version of KnockoutJS library from CDNJS as below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script>

 

What do you think?

I hope you have idea of how to setup KnockoutJS in our Application. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.