2012-12-02 1 views
0

유성을 사용하여 간단한 데이터 입력 및 시각화 응용 프로그램을 만듭니다. jQuery를 사용하여 데이터를 기반으로 각 항목에 대한 CSS를 변경하려고하면 문제가 발생합니다.Meteor 및 jQuery : cursor.observe를 사용하여 jQuery CSS 조작 트리거

항목을 추가 (cursor.observe 사용) 할 때 높이 값이 계산되면 jQuery가 CSS 값을 적용하는 데 사용되지만 실제로는 수행하지 않도록 설정했습니다. 콘솔을 사용하여 값을 표시하기 때문에 값이 올바르게 계산된다는 것을 알고 있습니다.

이 코드가 실행될 때이 항목의 실제 html이 아직 템플릿에서 빌드되지 않았기 때문에 이것이 발생 했습니까? 이 경우, html 뒤에 jQuery가 실행되도록이 코드를 어디에 둘 수 있습니까?

다음은이 문제와 관련된 코드입니다. 모든 도움을 주시면 감사하겠습니다. 당신이 당신의 행동이 Template.mainPanel.Actions에서 커서 복귀와 페어링하고 그

<template name="mainPanel"> 
    {{#each Actions}} 
    <div id="{{ID}}">Something</div> 
    {{/each}} 
</template> 

: 나는 믿고있어

Template.mainPanel.Actions = function(){ 
    var actions = Actions.find() 

    actions.observe({ 
     added: function(action){ 
      var entryHeight = action.Duration 

      console.log("entryHeight: " + entryHeight) 

      $('#vis' + action.ID).css({'height':entryHeight}) 
     } 
    }) 

    return actions 
} 
+0

는'Template.rendered' 콜백을 사용합니다. http://docs.meteor.com/#template_rendered – bento

답변

2

당신은 같은 앱에서 일부 코드가 있습니다. 대신 관찰과 복잡한 일을의

, 당신과 같이, 직접 HTML에 스타일에 대한 반응 핸들을 포함 할 수 있습니다 :

<template name="mainPanel"> 
    {{#each Actions}} 
    <div id="{{ID}}" style="height: {{Duration}}px">Something</div> 
    {{/each}} 
</template>