【问题标题】:knockout template - binding text to a function, with template data passed in淘汰模板 - 将文本绑定到函数,并传入模板数据
【发布时间】:2013-05-08 00:22:49
【问题描述】:

我有一个带有可观察数组的视图模型。它填充了一些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 是一个包含用户推特 url 的字符串(如“http://twitter.com/iamdiddy”)

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

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

在视图模型中

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

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

【问题讨论】:

    标签: javascript jquery knockout.js underscore.js


    【解决方案1】:

    尝试改变

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

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

    【讨论】:

    • $root.getTwitterTag(actor.id) 不起作用,但起作用的是 $root.getTwitterTag($data),无论如何都接受答案,因为它引导我找到正确的解决方案
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-23
    • 1970-01-01
    相关资源
    最近更新 更多