Knockoutjs супер основы - PullRequest
Новая
       22

Knockoutjs супер основы

1 голос
/ 25 января 2012

Я пытаюсь выполнить следующую задачу:

  1. Элемент списка
  2. Получить дескриптор Twitter
  3. Спросить пользователя, сколько твитов отображать
  4. Получить твиты
  5. Отображать только те твиты, которые указал пользователь

У меня супер базовая проблема.У меня есть жестко запрограммированный html, и я могу получать твиты с помощью knockouk, я хотел бы удалить свой жестко запрограммированный элемент и использовать только knockoutjs.Я могу получить х количество твитов от пользователя Y, используя подписка , и я использую наблюдаемый массив , чтобы проталкивать твиты.

Код, который работает фантастически .Вот как я это делаю: 

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. Recent_tweets.slice (-1) [0] [0] .text (первый твит)
  2. latest_tweets.slice (-1) [0] [1] .text (второй твит)

Сейчас я статически подключаю каждый твит в html.Это нарушается, если у пользователя есть только 3 твита, и я жестко запрограммировал 5 твитов в html.Как я могу выбить пользователя для вставки html с твитом?

Пример статического HTML, который я хотел бы исключить, И заменить его динамическим HTML, вставленным Knockout JS. 

<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>

1 Ответ

2 голосов
/ 25 января 2012

Общая идея состоит в том, чтобы использовать foreach привязку Knockout с observbaleArray.Вместо того, чтобы помещать результат в массив observableArray, вы бы хотели полностью установить для него новый массив.

Итак, вместо: 

recent_tweets.push(result);

Вы должны сделать: 

recent_tweets(result);

Вот пример, основанный на вашем коде, который предоставляет некоторые из наблюдаемых для привязки: http://jsfiddle.net/rniemeyer/8kK6m/

...