knockout模板 - 将文本绑定到函数,传入模板数据

时间:2013-05-13 20:58:18

标签: javascript jquery knockout.js underscore.js

我有一个带有可观察数组的视图模型。它填充了一些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);

对于模型中的每个项目,我使用模板构建li:

<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喜欢将元素的文本数据绑定为函数的结果,并将模型中的当前数据用作参数。例如:

actor.id是一个包含用户的twitter网址的字符串(例如“http://twitter.com/iamdiddy”)

我想将该字符串传递给函数并返回“#iamdiddy”表示。

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

在视图模型中

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

我该怎么做(用参数调用函数,而不是提取#...)? knockout是否支持此功能?

1 个答案:

答案 0 :(得分:19)

尝试更改

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

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