Concatenate Function Value and Property Value Using Knockoutjs

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.

<script type="text/javascript">

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

<div class="main" data-bind="flash: name">

<h2>Name:- <span data-bind="text: name"></span> </h2>

<input data-bind="value: name" />

<button data-bind="click: greet, jqButton: true" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">

<span class="ui-button-icon-primary ui-icon ui-icon-gear"></span>

<span class="ui-button-text">Test</span></button></div>

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" %>