1

我正在尝试完成以下任务：

  1. 项目清单
  2. 获取推特句柄
  3. 询问用户要显示多少条推文
  4. 获取推文
  5. 仅显示用户指定的推文

我有一个超级基本的问题。我有硬编码的html，我可以用knkouk获取推文，我想消除我的硬编码元素，只使用knockoutjs。我可以使用subscribe从用户 Y 获取 x 条推文，并使用observable 数组将推文推送到其中。

代码效果很棒。这是我的做法：

TwitterGet = function() {
  var recent_tweets = ko.observableArray();
  var twitter_image = ko.observable();

  var component = this;  
  var url = 'https://twitter.com/search.json?callback=?';

  this.attributes.twitter_user_handle.subscribe(function(value) {

    var url = 'https://twitter.com/search.json?callback=?';
    var twitter_parameters = {
      include_entities: true,
      include_rts: true,
      q: 'from:' + value,   
      count: '3'
    }

  $.getJSON(url,twitter_parameters, 
  function(json) {
    twitter_image(json.results[0].profile_image_url);
      result = json.results;
      recent_tweets.push(result);
  });
 }); 
};

我的问题非常简单。推文住在这里：

  1. 最近的推文.slice(-1)[0][0].text（第一条推文）
  2. 最近的推文.slice(-1)[0][1].text（第二条推文）

现在我将每条推文静态插入到 html 中。如果用户只有 3 条推文并且我已将 5 条推文硬编码到 html 中，则会中断。如何用户淘汰赛以在推文中插入 html？

我想消除的静态 HTML 示例，并替换为由 Knockout JS 插入的动态 HTML。

<div class="tweet" id="first-tweet">
<span class="handle"><a href="#" target="_blank" data-bind-component_<%=component.id-%>="inline_edit: attributes.twitter_user_handle"></a> 
</span><span data-bind-component_<%=component.id-%>="inline_edit: recent_tweets.slice(-1)[0][1].text"></span><br>
<a href="#">share</a>
<a href="#" target="_blank">retweet</a> 
<a href="#">reply</a></div>

<div class="tweet" id="second-tweet">
<span class="handle"><a href="#" target="_blank" data-bind-component_<%=component.id-%>="inline_edit: attributes.twitter_user_handle"></a> 
</span><span data-bind-component_<%=component.id-%>="inline_edit: recent_tweets.slice(-1)[0][2].text"></span><br>
4

1 回答 1

2

总体思路是使用foreachKnockout 与 observbaleArray 的绑定。与其将结果推入 observableArray，不如将其完全设置为一个新数组。

所以，而不是：

recent_tweets.push(result);

你会这样做：

recent_tweets(result);

这是一个基于您的代码的示例，它公开了一些可观察的绑定：http: //jsfiddle.net/rniemeyer/8kK6m/

于 2012-01-25T02:58:48.487 回答