CODEWITHSUNDEEP
asp.netknockout.js
Asdfg
Asdfg

Reputation: 12203

Knockout.js - javascript function on data-bind

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

Upvotes: 24

Views: 42757

Answers (5)

Elim Garak
Elim Garak

Reputation: 1817

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

Upvotes: 0

Dani Thomas
Dani Thomas

Reputation: 21

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

Upvotes: 1

ProfNimrod
ProfNimrod

Reputation: 4310

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>

Upvotes: 18

Roman Bataev
Roman Bataev

Reputation: 9361

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

Upvotes: 14

Peter
Peter

Reputation: 634

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>

Upvotes: 5

Related Questions