knockout template - binding text to a function, with template data passed in

Question

i have a view model with an observable array. Its populated with some json:

this.socialTiles = ko.observableArray([]);

ko.computed(function () {

  jQuery.getJSON( this.apiURL+"&callback=?", function (data) {

    var theData = data.entries; 
    tilesModel.socialTiles(theData);
    console.dir(theData);
  });
}, tilesModel);

for each item in the model, i build an li using template:

<ul id="tiles-ul" data-bind="template: {name:'twitter_template', foreach:socialTiles}">



<script type="text/html" id="twitter_template"> 
  <li class="social-tile box-shadow">
    <div class="header">
      <div class="header-img">
        <img data-bind="attr: { src: actor.avatar}">
      </div>
      <div class="name_and_time">
        <span class="full-name" data-bind="text: actor.title"></span>
        <span class="twitter-name" data-bind="text: actor.id"></span>
        <span class="how-long-ago" > 5 minutes ago </span>
      </div>
    </div>
    <div class="message-content" data-bind="html: object.content">
    </div>
    <div class="footer">
      <div class="social-icon-twitter">
      </div>
    </div>  

    <span data-bind="text: $index"></span>      
  </li>   
</script>

id like to data-bind the text of an element to be a result of a function, with the current data from the model used as an argument . example:

actor.id is a string containing a twitter url of a user (like "http://twitter.com/iamdiddy")

i'd like to pass that string to a function and return a "#iamdiddy" representation.

<span class="twitter-name" data-bind="text: getTwitterTag(actor.id)"></span>

in the view model

 function getTwitterTag("twURL"){
    return ... whatever;
}

how can I do this (call a function with argument, not extract the #... )? Does knockout support this functionality?

RodneyTrotter RodneyTrotter · Accepted Answer · 2013-05-14T01:48:12

Try changing

<span class="twitter-name" data-bind="text: getTwitterTag(actor.id)"></span>

to

<span class="twitter-name" data-bind="text: $root.getTwitterTag($data)"></span>

knockout template - binding text to a function, with template data passed in

1 Answers