Tag Archives: Templating

KnockoutJS – Visible Binding

As the name specifies this binding makes the related DOM element to be visible or hidden based on the value passed in the binding.

Syntax

visible: <binding-condition>

Parameters

When the parameter transforms into false (like false/0/null/undefined), then the binding sets display:none for the element to making it as hidden.

When the parameter transforms into true (true/non-null/array ), the binding removes the element’s display value and makes it visible.

Example

<html>
<head>
<title>KnockoutJS Computed Observables</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js"></script>

</head>
<body>
<a href="#" data-bind="click: toggleVisibility">Show/Hide Text</a>
<br/><br />
<div data-bind="visible: shouldShowMessage">
Welcome To Dotnet-helpers.com Learning Curve
</div>

<script type="text/javascript">
var viewModel = function () {
this.shouldShowMessage = ko.observable(true);
this.toggleVisibility = function () {

this.shouldShowMessage(!this.shouldShowMessage());
alert('shouldShowMessage status ' + this.shouldShowMessage());
};

};
ko.applyBindings(new viewModel());
</script>

</body>
</html>

OUTPUT

 

What do you think?

I hope you have idea of how to use KnockoutJS visible or hidden based on the value passed in the binding. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.

KnockoutJS – Controlling text and appearance

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.

 

KnockoutJS – Environment Setup

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.