1

私は次のタスクを実行しようとしています。

  1. リストアイテム
  2. Twitterハンドルを取得する
  3. 表示するツイートの数をユーザーに尋ねる
  4. ツイートを取得する
  5. ユーザーが指定したツイートのみを表示する

私は超基本的な問題を抱えています。HTMLをハードコーディングしていて、knockoukでツイートを取得できます。ハードコーディングされた要素を削除し、knockoutjsのみを使用したいと思います。サブスクライブを使用してユーザー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（2番目のツイート）

現在、各ツイートを静的にhtmlに接続しています。ユーザーのツイートが3つしかなく、5つのツイートをhtmlにハードコーディングした場合、これは機能しません。ユーザーがノックアウトしてツイートにHTMLを挿入するにはどうすればよいですか？

削除し、KnockoutJSによって挿入されたダイナミックHTMLに置き換えたいSTATICHTMLの例。

<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

一般的な考え方はforeach、Knockout と observbaleArray のバインドを使用することです。結果を observableArray にプッシュするのではなく、完全に新しい配列に設定する必要があります。

したがって、代わりに：

recent_tweets.push(result);

あなたがするだろう：

recent_tweets(result);

これは、バインド用のオブザーバブルの一部を公開するコードに基づくサンプルです: http://jsfiddle.net/rniemeyer/8kK6m/

于 2012-01-25T02:58:48.487 に答える