Zac Anger's Blog

Meteor Notes

21 January, 2016

General Notes, from that time I played with Meteor

{{#with foo}} is a template tag that takes arg (foo). that is the data context for the block in that tag. being a tag, it needs to be closed later ({/with}).

{{#each}} also takes an argument, usually a 'cursor' such as the result of Collection.find().

Includes are like so: {{> foo bar}} which will bring in the bar from foo.

meteor's blaze will soon just be a thin templating layer over react.

iron router is meteor's primary routing package. its 'data' method helps with data contexts.

in meteor there are html templates and js template helpers, in which data context is accessible via this. an example:

<template name="profile">
  <h3>profile</h3>
  {{#with profile}}
  <img src="{{avatarPath}}" />
  {{#with name}}
  <p>{{fullName}}</p>
  {{/with}}
  {{/with}}
</template>


Template.profile.helpers({
  profile: function(){
    return Users.findOne(Session.get('userId'))
  },
  avatarPath: function(){
    return 'images/' + this.avatar
  },
  fullName: function(){
    return this.first + ' ' +  this.last
  }
})

a dedicated {{log}} helper can be more useful than console.log(this)

Template.profile.helpers({
  log: function(){
    console.log(this)
}})


<template name="profile">
  {{#with profile}}
  {{log}}
  <!-- etc -->
  {{/with}}

the .. keyword in helpers is to access a parent. That's pretty fucking rad, actually. And the ../.. also works exactly as expected (eg {{blah ..}} and {{blahblah ../..}}).

Reactivity in Meteor

Reactive computation: block of code (inside of a function) that re-runs when a reactive data source inside it changes.

Template.hello.helpers{(
  counter: function(){
    console.log('counter helper is running')
    return Session.get('count')
  }
)}

Here, counter re-runs whenever count changes (count is retrieved by Session.get('count_')).
Session variables are reactive sources. Template helpers are reactive computations.

Reactive variables in Meteor:

Reactive computations:

Custom reactivity in meteor:
reactive-var (third party package) enables defining own reactive variables.
these don't have global names (like Session.get('foo')'s foo), more like this.foo.get()
declared like new ReactiveVar().

var count = new ReactiveVar(0)
count.set(1)
count.get() // 1

There's also ReactiveDict. That's a thing.

Custom reactive computations:
Tracker.autorun(function(){})
Read the full Meteor manual for more on that, I guess.

Reactivity can be passed on through composition, eg var getCount = function(){ return Session.get('count') } -- getCount is a reactive data source, by virtue of Session.get('count'), which is itself a reactive data source.
SO...

Template.hello.helpers({
  counter: function(){
    console.log('counter helper is running')
    return Session.get('count')
  }
})

IS THE SAME AS

var getCount = function(){
  return Session.get('count')
}

Template.hello.helpers({
  counter: function(){
    console.log('counter helper is running')
    return getCount()
  }
})

both ways, counter reruns whenever count session variable changes.

composition only applies to functions. not variables.

Submit a bug report