javascript - knockout template - binding text to a function, with template data passed in -
i have view model observable array. populated 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 model, build 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 data-bind text of element result of function, current data model used argument . example:
actor.id string containing twitter url of user (like "http://twitter.com/iamdiddy")
i'd pass string function , return "#iamdiddy" representation.
<span class="twitter-name" data-bind="text: gettwittertag(actor.id)"></span>
in view model
function gettwittertag("twurl"){ return ... whatever; }
how can (call function argument, not extract #... )? knockout support functionality?
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>
Comments
Post a Comment