2

I understand that Blaze is used to make a template reactive by utilizing Tracker. I know that a template contains many View objects, one of each template element.

Views are the 'building blocks of reactive templates' and 'represents a reactive region of DOM'. And (from the docs), View can correspond 'to the current template helper, event handler, callback, or autorun'.

But I am confused what exactly is a View object, and how Blaze View relates to something like Template.mytemplate.helpers(), to Template.mytemplate.autorun(). For example, does each helper function corresponds to one View object? Or only when the function includes a reactive data source? The autorun method is for the entire template, how can a View be associate with an entire template, which has multiple View objects?

Kyll
  • 7,036
  • 7
  • 41
  • 64
dayuloli
  • 16,205
  • 16
  • 71
  • 126

1 Answers1

3

Its a bit difficult to explain because they've changed it quite a bit since I understood it better.

If you have a template like this

<template name="mytemplate">
    <p>{{value1}}</p>
    <p>{{value2}}</p>
</template>

and helpers like this:

Template.mytemplate.helpers({
    value1: function() { return Session.get("vala"); },
    value2: function() { return Session.get("valb"); },
});

It will end up as like this:

Template["mytemplate"] = new Template("Template.mytemplate", (function() {
  var view = this;
   return [HTML.P(Blaze.View(function() {
       return Spacebars.mustache(view.lookup("value1"));
 })), "\n   ", HTML.P(Blaze.View(function() {
       return Spacebars.mustache(view.lookup("value2"));
   }))];
}));

You can see that I had two helpers, and now the template is made of two Blaze.Views, one for each area of DOM that can be changed by a helper.

Each helper won't necessarily match up to each view. Each view represents an area which can be changed reactively. It appears as if its this way since helpers can change content. You can have a single helper and multiple views for it & you can also have views from other types of handlebars expressions such as {{#if}}.

When each Blaze.View section is rendered on screen, each has an instance. This means you can have the same exact view (maybe defined as a variable?) but two different values displayed on screen. Each can have an instance. Each instance has the methods such as:

  • autorun. Allows you to add a reactive method to the Blaze.View. This means if you can add a method containing Tracker computations that tell the Blaze.View when to redraw - Only representing the content in them.

  • firstNode and lastNode. This gives the first DOM element and the last DOM element of the Blaze.View. This allows the Blaze rendering engine to 'know' where to change any HTML/DOM if there is a change from running autorun

  • onXXX These are events for when the view is created or destroyed. These eventually bubble up to the Template containing the views.

There are others but the above are the ones that matter with regards to the Template instance.

When you run autorun for the entire template it's an entirely seperate computation, which is why you can't directly change the DOM from a this.autorun in a template. You have to use a reactive variable such as setting Session.set("vala", "new value").

When you change Session.set("vala", "new value"), the first Blaze.View would be redrawn. This is because it has a .autorun (an special internal one) will tell the view to redraw without touching the other view.

I hope i've answered your questions. If you have anything more specific please you would like to know please let me know and I'll edit the answer with this info if I can.

Tarang
  • 75,157
  • 39
  • 215
  • 276