Как запустить jQuery в реактивной среде?

Question

jQuery and Meteor

Meteor реагирует, родившись в мире веб-приложений, где есть только одна загрузка начальной страницы, jQuery родился в мире созданных сервером страниц.

Итак, вопрос в том, когда нужно вызвать плагин jQuery на шаблонах Meteor?

1) Нагрузка на страницу -> Не работает. Данные еще нет.

Template.contextualFeed.feedItems = -> 
    Feed.find() 
    $("abbr.timeago").timeago() # Calling the feed right away is useless as Feed.find() is initially empty and will populate a bit later when subscription is delivering the initial data. 

<template name="contextualFeed"> 
    <ul class="feed {{isActive "feed"}}"> 
    {{#each feedItems}} 
    <li class="popup-holder"> 
     {{> contextualFeedItem}} 
    </li> 
    {{/each}} 
    </ul> 
</template> 

2) На каждом item-> работ, но кажется невероятно расточительно.

Template.contextualFeed.feedItems = -> 
    Feed.find() 

Template.contextualFeed.jQueryMe = -> 
    $("abbr.timeago").timeago() # Works, but seems incredibly wasteful 


<template name="contextualFeed"> 
    <ul class="feed {{isActive "feed"}}"> 
    {{#each feedItems}} 
    <li class="popup-holder"> 
     {{> contextualFeedItem}} 
     {{jQueryMe}} 
    </li> 
    {{/each}} 
    </ul> 
</template> 

3) После того, как после того, как загружены все элементы -> работы, но еще не так элегантно, как это должно быть ...

Template.contextualFeed.feedItems = -> 
    Feed.find() 

Template.contextualFeed.jQueryMe = -> 
    Meteor.defer -> 
     #(cut) some ugly code to make sure it only executes once. 
     $("abbr.timeago").timeago() # Works, but seems incredibly wasteful 


<template name="contextualFeed"> 
    <ul class="feed {{isActive "feed"}}"> 
    {{#each feedItems}} 
    <li class="popup-holder"> 
     {{> contextualFeedItem}} 
     {{jQueryMe}} 
    </li> 
    {{/each}} 
    </ul> 
</template> 

4) не правда там какое-то событие, которое возникает, когда Данные загружаются не на каждый элемент отдельно, как на добавление?

Итак, у вас есть более чистый способ вызова jQuery в шаблонах Meteor?

PS: Примеры кода в CoffeeScript ... Будьте вежливы, несмотря на это;)

Answer 1

Я думаю, что есть два потенциальных поезда мысли здесь. Идея, которую вы предлагаете в # 4, событие «dataLoaded» может потребовать некоторого разговора. Однако первый аргумент, который приходит на ум, состоит в том, что, как вы правильно сказали, Meteor представляет собой новое поколение флюидов для веб-приложений. В этом мире, что это означает, что загружен исходный набор данных?

Второй может быть, что есть лучшее решение вашей проблемы. Там могут быть случаи, когда слияние jQuery и Meteor кажется неуклюжим, но после беглого чтения вашего кода кода я чувствую, что в этом примере может быть лучший способ. Похоже, у вас есть сбор фидов и вы хотите отобразить живую временную метку для каждого элемента подачи, например «2 часа назад». Это верно?

Если так: я не думаю этот пример # 2 ужасно расточительный, если вы не собираетесь хранить живую временную метку, как ее представлено в Монго. Я, по общему признанию, не уверен в лучшем способе в Meteor, но вы должны уметь кэшировать значение timestamp в приложении. Еще одна вещь, которую вы, возможно, захотите рассмотреть, - это сохранить значение в Mongo отдельно от отметки времени Unix - скажем, несколько часов. Вы можете запустить процесс на сервере, чтобы обновить время, прошедшее с помощью элемента фида. Это устойчиво, предполагая, что фид-элементы в конечном итоге устареют, их не так много, и вам не нужно быть супер точным в метке времени.

У меня нет данных и не предполагается, что эти методы являются a) правильными и б) быстрее, чем очевидное решение, но его пища для размышлений.

---

ETA: Meteor.subscribe может быть полезным http://docs.meteor.com/#meteor_subscribe.См использование в примере TODO: https://github.com/meteor/meteor/blob/master/examples/todos/client/todos.js

Answer 2

С начала wordplay/client/wordplay.js, один из примеров Метеор:

Words.find({player_id: Session.get('player_id'), state: 'bad'}) 
    .observe({ 
     added: function (word) { 
      setTimeout(function() { 
       $('#word_' + word._id).fadeOut(1000, function() { 
        Words.remove(word._id); 
       }); 
      }, 5000); 
     } 
    } 
); 

Вам не нужны ваши шаблоны, чтобы вызвать вашу JS логику. Просто используйте .observe.