Knockout.js - javascript function on data-bind

Question

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())

Answer 1

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>

Answer 2

<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));    
}

Answer 3

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(...){...};

Answer 4

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.$data.name + '</font>';
  return title;
}

You will also need to set this

       $.ajaxSetup({
          async: false
        });

Answer 5

Well I am just going through the tutorial myself but I thought you had to set up a property and use ko.computed to give it its value (from the tutorial):

function AppViewModel() {
this.firstName = ko.observable("Bert");
this.lastName = ko.observable("Bertington");
this.fullName = ko.computed(function(){ 
  return this.firstName() + " " + this.lastName(); 
  },this);
}

Then you can have:

Full name: <strong data-bind="text: fullName"></strong>