반응 환경에서 jQuery를 트리거하는 방법은 무엇입니까?

Question

jQuery and Meteor

Meteor는 초기 페이지로드가있는 Web Apps의 세계에서 탄생했습니다. jQuery는 서버 생성 페이지의 세계에서 태어났습니다.

그래서, 질문은 ... 언제 유성 템플렛에서 jQuery 플러그인을 호출할까요?

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),하지만 매우 낭비 보인다. 모든 항목이로드되면 후

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를보다 깨끗하게 호출 할 수 있습니까?

PS : 코드 예제는 커피 스크립트에 ... 그것을에도 불구하고 좋은 수)

Answer 1

내가 여기에 생각이 잠재적 인 기차가 있다고 생각합니다. # 4에서 제안한 아이디어 인 "dataLoaded"이벤트는 일부 대화를 보장 할 수 있습니다. 그러나, 마음에 떠오르는 첫 번째 주장은 여러분이 올바르게 말했듯이, Meteor는 차세대 유동 웹 응용 프로그램 프레임 워크입니다. 이 세상에서 초기 데이터 세트가로드되었다는 것이 정확히 무엇을 의미합니까?

두 번째로 더 좋은 해결책이있을 수 있습니다. jQuery와 Meteor의 병합이 껄끄 러운 느낌을주는 경우가있을 수 있지만, 예제 코드를 자세히 읽은 후에이 예제에서 더 좋은 방법이있는 것처럼 느껴질 수 있습니다. 피드 컬렉션이 있고 "2 시간 전"과 같은 각 피드 항목에 대한 실시간 타임 스탬프를 표시하려는 것 같습니다. 그 맞습니까?

만약 그렇다면 : 당신이 살아있는 타임 스탬프를 Mongo에 제시된대로 저장하지 않는다면 예제 # 2는 대단히 낭비라고 생각하십시오. Meteor에서 가장 좋은 방법은 확실하지 않지만, 앱에서 타임 스탬프 값을 캐싱 할 수 있어야합니다. 고려해야 할 또 다른 사항은 Mongo에 유닉스 타임 스탬프와 별도로 값을 저장하는 것입니다. 피드 항목에서 경과 된 시간을 업데이트하기 위해 서버에서 실행중인 프로세스를 가질 수 있습니다. 이는 피드 항목이 결국 부실하다고 가정 할 때 지속 가능합니다. 많은 수의 푸시 항목이 없으며 타임 스탬프에 정확히 일치 할 필요가 없습니다.

나는 데이터가 없으며 이러한 방법이 a) 옳고 b) 명백한 해결책보다 빠르지 만 생각을위한 음식임을 제안하지 않습니다.

---

이메일 : Meteorscribe는 http://docs.meteor.com/#meteor_subscribe 일 수 있습니다.wordplay/client/wordplay.js의 시작, 유성 예제 중 하나에서 https://github.com/meteor/meteor/blob/master/examples/todos/client/todos.js

Answer 2

: 할 일 예에서 사용을 참조하십시오

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을 사용하십시오.