- with - Knockout.js-javascript function on data-bind

knockout js data bind multiple (4)

Is there a way i can call JavaScript function on data-bind like this:

<span id="lblSomePropVal" data-bind="text: MySomeFunction(SomeProperty())" ></span>

What i am trying to do is call MySomeFunction with the value of SomeProperty of my viewmodel. My SomeFunction will return some text based on value passed and that will be displayed in the span lblSomePropVal.

I tried it the way i have written in the example but it throws binding error.

Am i missing something here or is there any other way of doing this?

This is the error i am getting:

Microsoft JScript runtime error: Unable to parse bindings.
Message: [object Error];
Bindings value: text: MySomeFunction(SomeProperty())

I had a similar problem trying to calculate table cell entries. What worked for me was including 'MySomeFunction' in my data model, and then data-binding my table cells as:

<td data-bind="text: $root.MySomeFunction(SomeProperty)"></td>

I have managed to do this by using the context. If you need the whole code I can send it to you.

<h2 class="text" data-bind="html: currentProgram($context)"></h2>

function currentProgram(context){
  var title = '<font size="1">' + context.$ + '</font>';
  return title;

You will also need to set this

          async: false

You can use arbitrary JavaScript expressions for bindings, but keep in mind that they are evaluated in the viewmodel's context, so all functions in the expression have to be properties of viewmodel. In your case, MySomeFunction has to be a property of your viewmodel. If you create your viewmodel using mapping plugin, you can attach additional functions to the viewmodel like this:

var viewModel = ko.mapping.fromJS(data.d)
viewModel.MySomeFunction = function(...){...};

<div style="font-size:18px;float:left;width:95%" data-bind="html: trimString(AccountName,25)"></div>

function trimString(value, maxLen) {

    //Return undefined, and short strings
    if (value === undefined) return undefined;
    if (value.length < maxLen) return value;

    return value.substring(0, (maxLen - 1));