Concatenate Function Value and Property Value Using Knockoutjs

Anubhav Chaudhary
10y
14.5k
0
0

Article

Introduction

This article explains how to concatenate the Function Value and Property Value using Knockoutjs in an ASP.NET Application.

It might be possible that you want to show some data or some message to the user in which the value from one of the functions and values provided by one of the properties should be concatenated. In those cases you can refer to this article, to do it we will use a little bit of JavaScript in the Knockout.

Now let's see the procedure to make this happen.

Step 1

First of all we will work on the ViewModel of our project which is the lifeline of today's article.

ko.bindingHandlers.jqButton = {

init: function (element, valueAccessor) {

var options = valueAccessor();

$(element).button(options);

ko.utils.domNodeDisposal.addDisposeCallback(element, function () {

$(element).button("destroy");

});

update: function (element, valueAccessor) {

ko.utils.unwrapObservable(valueAccessor());

$(element).hide().fadeIn(500);

}

};

var x = {

name: ko.observable("Anu"),

greet: function () {

alert("Hi! " + x.name());

}

};

ko.applyBindings(x);

</script>

Here I had used the Custom Binding of Knockout that is used when we want the third-party components in our application. In Custom Binding there are two main types of CallBack Functions, one is the "init" function and the other one is the "Update" function.

First I had worked on the init function that will work on the button, this button is a jQuery UI Button. What this button will do is it will show a popup when we will click on this button.

After that I had worked on the update function, this will unwrap the Observable.

After that I had created a function named as "x" and in that function "name" is given that is made Observable and by default its text will be "Anu".

After that I made another function named "greet", this function will call an alert box in which some text will be shown. Here one thing is considerable, in other words you can see that first I provided some static Text as "Hi!" and after that I had written "+ x.name()", now what this means is whenever we will put a "." (dot) after the function name then all it's components will become accessible, that's why I was able to use the "name:" provided in the function x.

Now our work on the ViewModel is completed and now we will work on the view of our application.

Step 2

View is the designing part of our application. Here first I had used a span and a TextBox in both of these value of "name:" is bound, but both will work in a different manner, if we change the text in the TextBox at runtime then an automatic change will be seen in the Span.

After that a button is used that is a jQuery UI Button and on click of this button the greet function is bound.

The complete code of this application is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.WebForm1" %>

<!DOCTYPE html>

</head>

<body>

ko.bindingHandlers.jqButton = {

init: function (element, valueAccessor) {

var options = valueAccessor();

$(element).button(options);

ko.utils.domNodeDisposal.addDisposeCallback(element, function () {

$(element).button("destroy");

});

update: function (element, valueAccessor) {

ko.utils.unwrapObservable(valueAccessor());

$(element).hide().fadeIn(500);

}

};

var x = {

name: ko.observable("Anu"),

greet: function () {

alert("Hi! " + x.name());

}

};

ko.applyBindings(x);

</script>

</body>

</html>

Output

Now you can debug your application. On debugging you will get an output like this:

concatenate function1.jpg

Now if I change the text in the TextBox and then press Enter or click outside the TextBox, then you will see an automatic change in the text shown above the TextBox.

concatenate function2.jpg