Meteor : 계산 수행 방법 Mongo 데이터의 클라이언트 측

Question

내 Meteor 앱에서 서버 측 데이터를 성공적으로 게시하고 클라이언트 측 데이터를 구독했습니다. 이제 원시 데이터를 클라이언트 화면으로 직접 푸는 대신 자바 스크립트 객체로 저장하고 일부 계산을 수행 (숫자 처리) 한 다음 클라이언트 화면 (HTML5 캔버스 요소 내)에서 결과를 렌더링합니다. Mongo가 업데이트 될 때마다 자바 스크립트 코드가 다시 실행되어야합니다 (즉, js 객체가 다시 설정되고 계산이 해당 객체에서 다시 수행되며 새 결과가 캔버스에 렌더링 됨).

나는 Template.example.helpers 블록을 사용 몽고 데이터를 붙잡고 클라이언트에서 직접 다음과 같이 보여 수 있습니다

---

Meteor.subscribe('collection','query'); 

Template.example.helpers({ 
    sampleData: function(){ 
    return Collection.findOne({query:`query`}); 
    } 
}); 

---

<template name="example"> 
    <div> 
    {{sampleData.last}} 
    </div> 
    <canvas id="test-canvas"></canvas> 
</template> 

---

하지만 '무엇을 내가하려고하는 것은내에서 클라이언트의 화면으로 이동하기 전에이 데이터를 보류하는 것입니다.블록 :

Meteor.subscribe('collection','query'); 

Template.example.rendered = function(){ 
    // define HTML5 canvas and context variables 
    var canvas = $("#test-canvas")[0]; 
    var context = canvas.getContext("2d"); 
    // store Mongo data as Javascript variable 
    // loop over this variable and perform calculations 
    // draw results to the canvas 
} 

올바른 방법으로 접근하고 있습니까? 그렇다면 어떻게 할 수 있습니까? 감사!

Answer 1

가 내가 위에서 제기 된 질문에 대한 내 대답을 알아낼 수 있었다. 내 서식 파일 전에 데이터가 클라이언트에 의해 검색된로드하는, 따라서 계속 cannot read property <blank> of undefined 브라우저의 JavaScript 콘솔 및 코드를 인터럽트 얻을. 당신은 당신이 패키지까지 당신이 특정 템플릿에 필요한 데이터 소스)를 포함하는 객체를 (작업중인 템플릿의 "데이터 컨텍스트"로 설정)

일하기 위해 iron-router 패키지를 사용해야하고,

2) 데이터가 검색 될 때까지 템플릿이 렌더링되지 않도록합니다.데이터가 검색되면 iron-router가 템플릿을로드하고 위에서 만든 데이터 객체에 대한 전체 자바 스크립트 컨트롤을 갖게됩니다.

1)를 설치 철 - 라우터

2) 템플릿

3의 경로를 정의) 철 - 라우터를 이야기하는 waitOn 방법을 사용하여 높은 수준에서

단계

4) 템플릿로드 전에 데이터를 검색하는 동안 표시되는 "로드 중"템플릿 (스플래시 화면)을 정의하십시오. https://github.com/EventedMind/iron-router/issues/554에 따라, 당신은 당신의 철 - 라우터 router.js 파일에 코드 블록을 삽입하여이 작업을 수행 할 수 있습니다 :

Router.onBeforeAction(function(pause) { 
    if (!this.ready()) { 
    this.render('loading'); // wait 
    pause();    // ready 
    } 
}); 

그냥 당신이 함께 갈 수있는 loading 템플릿을 생성해야합니다.

http://www.manuel-schoebel.com/blog/iron-router-tutorial

:

5) 상세한 수준에서)

단계 템플릿에 사용되는 (템플릿의 데이터 컨텍스트를 설정 데이터 오브젝트를 작성 data 방법을 사용

Answer 2

별도의 개체에 데이터를 저장하고 계산을 수행하는 것이 더 쉬우 며 대상에서 템플리트를 렌더링하고 몽고 (mongo)에서 직접 렌더링하는 것이 더 쉬울 것입니다. 템플릿을 "Deps"를 사용하여 쉽게 다시 만들면 쉽게 만들 수 있습니다. 당신은 훨씬 더 maintainable 코드.

Answer 3

귀하의 접근 방식이 좋습니다.

• added(document) 또는 addedAt(document, atIndex, before)
• removed(oldDocument) 또는 removedAt(oldDocument, atIndex)
• changed(newDocument, oldDocument) 또는 changedAt(newDocument, oldDocument, atIndex)
• movedTo(document, fromIndex, toIndex, before)

이 있습니다 : 열쇠는 여기에 컬렉션 항목이있는 경우 observe 수집 및 업데이트 캔버스입니다 또한 더 많은 pe 형식은 observe changes in collection입니다. 다음과 유사한 코드가 당신을 도움이 될 것입니다

if (Meteor.isClient) { 
    Template.example.rendered = function() { 
    var canvas = $("#test-canvas")[0]; 
    var context = canvas.getContext("2d"); 
    Collection.find().observe({ 
     added: function (doc) {    // draw sth on canvas   }, 
     changed: function (doc) {   // draw sth on canvas   }, 
     movedTo: function (doc) {   // draw sth on canvas   }, 
     removed: function (doc) {   // remove sth from canvas  } 
    }); 
    }; 
} 

예 : https://github.com/Slava/d3-meteor-basic