jQuery를 사용하여 Meteor에서 렌더링 된 요소를 타겟팅하십시오.

Question

저는 지금 당분간이 문제에 시달리고 있으며, 효과가있는 해결책을 찾지 못하는 것 같습니다. 희망을 갖고 여기 누군가가 도울 수 있기를 바랍니다.

컬렉션의 모든 항목에 대해 div를 렌더링하고 jQuery를 사용하여 각 div를 대상으로하고 해당 div에 해당하는 항목에 저장된 정보를 가져 와서 데이터 값에 따라 CSS를 변경하려고합니다. 여기

내 템플릿입니다 :

<template name="vis"> 
    <div id="vis"> 
     {{#each Actions}} 
      <div class="visEntry" id="entry{{ID}}"></div> 
     {{/each}} 
    </div> 
</template> 

내가 나에게 컬렉션에 추가 될 때마다 및 항목 콜백을 제공하기 위해 cursor.observe()를 사용하여 시도,하지만 난 새로 렌더링 선택 jQuery를 사용할 수 없습니다 요소. 선택한 항목의 값을 콘솔에서 인쇄 할 수 있습니다. jQuery를 사용하여 템플릿이 아닌 div (HTML 파일에 하드 코딩 됨)를 선택하고 수정하지만 원하는 요소를 선택하면 작동하지 않습니다.

Template.vis.Actions = function(){ 
    var actions = Actions.find() 
    actions.observe({ 
     added: function(action){ 
      var entryHeight = action.Duration 
      var entryOffset = ($("#vis").height() - entryHeight)/2 

      var target = "#entry" + action.ID; 
      $(target).css({'background-color':'red'})  // Doesn't work 
      $("#testDiv").css({'background-color':'red'}) // Works fine 
     } 
    }) 
    return actions 
} 

내 라이브 페이지의 소스 코드를 확인했으며 jQuery 선택기에 사용 된 ID가 정확합니다. entry1, entry2, entry3 및 entry4의 네 가지 항목이 있지만 jQuery에는 보이지 않습니다. 이것은 나를 미치게합니다. 누군가 내가 잘못하고있는 것을 알고 있다면, 나는 약간의 피드백을 듣고 싶습니다.

Answer 1

DOM이 아직 렌더링되지 않았으므로이 목적으로 Meteor.template.rendered 함수를 사용할 수 있습니다. 당신은 this의 내부 각 템플릿과 관련된 데이터에 액세스 할 수 있습니다

Template.visEntry.rendered = function(){ 
    var mydata = this.data, 
     el = this.find('div.visEntry'); 

    // jquery code here; 
} 

:

<template name="vis"> 
    <div id="vis"> 
     {{#each Actions}} 
      {{>visEntry}} 
     {{/each}} 
    </div> 
</template> 

<template name='visEntry'> 
    <div class="visEntry"></div> 
</template> 

을 그리고 당신은이 같은 Template.rendered 콜백을 사용할 수 있습니다 : 귀하의 템플릿은 다음과 같이 볼 수 있었다 find에 내장 된을 사용하여 해당 템플릿 내의 적절한 dom 요소를 가져올 수도 있습니다. 그런 다음 관련 데이터로 원하는 DOM 요소의 CSS를 설정할 수 있습니다. 또한 템플릿에 원래 소스 대신 Meteor.Collection이 제공된 경우 추가/변경/이동 된 템플릿 만 렌더링됩니다. 실제로, 나는 이것이 당신이하려고했던 것을 observe와 함께 제공한다고 생각합니다.