KO data binding "text:" to function with parameter

Question

Is there any way to do the following without having to go through temporary observable / calculated observable data? I have general data that are used to search to display data:

<span data-bind="text: lookupContactName(31)"></span> 

result: exectuded function, parameter found, logic ok, and the calculated full name is returned, but not displayed (possibly because it is not observed)

 <span data-bind="text: lookupContactName(contactId)"></span> 

result: contactId is not parsed, so the correct parameter value is not displayed.

I suppose I would need to create custom bindings to work correctly?

overall: I started to doubt a little whether my approach to loading data only once and trying to combine the identifier is a good approach. any views? am I better off creating join tables / views / SP packages?

Thanks, J.

here, the relevant parts of the code that I use ... I will study jsfiddle for future help.

ALL ALERT returns the expected values ​​... but still the text data binding does not get the value

General data library:

 customers.Contact = function () { var self = this; id = ko.observable(); title = ko.observable(); givenname = ko.observable(); surname = ko.observable(); fullName = ko.computed(function () { return title()+". "+givenname()+" "+surname(); }); return { id: id, title: title, givenname: givenname, surname: surname, fullName: fullName }; }; customers.ContactList = function () { var self = this; contactList = ko.observableArray([]); //.publishOn("ContactList"); loadContactData = function () { var self = this; customers.helperDataService.getContactData(loadContactDataCallBack); }; loadContactDataCallBack = function (json) { var self = this; $.each(json, function (i, p) { var contact = new customers.Contact().id(p.Id) .title(p.Title) .givenname(p.Name) .surname(p.Surname); contactList.push(contact); }); }; lookupContactName = function (id) { var self = this; alert("value to be found: "+id); ko.utils.arrayForEach(contactList(), function (contact) { alert("SEARCH: contactid: " + contact.id() + " - " + "id: " + id); if (contact.id() === id) { alert("FOUND: contactid: " + contact.id() + " - " + "id: " + id); alert("value:" + contact.fullName()); return contact.fullName(); } }); }; return { loadContactData: loadContactData, lookupContactName: lookupContactName }; }; 

What is called from here ... (I changed it to contactId () and this passes the correct value to the function)

 <div>Creator: <span data-bind="text: lookupContactName(contactId())"></span></div> 

Answer 1

If your <span data-bind="text: lookupContactName(contactId())"></span> is in the foreach loop, you need to add a method with $ root, otherwise it will look for "lookupContactName" in the array in which it loops .

Try:

 <div>Creator: <span data-bind="text: $root.lookupContactName(contactId())"></span></div> 

Answer 2

The problem is that the search function does not return a value

 ko.utils.arrayForEach(contactList(), function (contact) { // some checking code return contact.fullName(); }); 

your "return" is associated with an internal function passed to the arrayForEach utility method. You need a code like this

 var result; ko.utils.arrayForEach(contactList(), function (contact) { // some checking code result = contact.fullName(); }); return result; 

Answer 3

I'm not sure I understand what the problem is. You can do something similar if you want:

 function lookupContactName(cid) { var obj = ... // Find your object by id; return ko.computed(function () { return obj.name() + obj.lastname(); }); } 

It should just work.