Getting started with native Blaze.render

blaze
1

Hello,

I usedrender my templates with kadira:flowrouter and kadira:blaze-layout.
I would like to understand how to route and render using meteor native components.

Here is an example:

test.js

Template.test.onCreated(function () {})
Template.test.helpers({
data() { return db.find({}) }
})

test.html:

<template name="test">
{{#each obj in data}}
{{obj}}
{{/each}} 
</template>

route.js

  FlowRouter.route('/', {
    name: 'test',
    action(params) {
      BlazeLayout.render('test', {params: params})
    }
  })

Now, the route.js is using kadira. I would like to understand how to route and render this example, using native functions like Blaze.render()

Thx

2 
 FlowRouter.route('/', {
    name: 'test',
    action(params) {
      Blaze.render(Template.test, document.body)
    }
  })

would be half of the answer.

3

At the route level, you probably want to call Blaze.renderWithData - as that allows you to pass in the params you’re looking to.

The function signature is

Blaze.renderWithData(content, data, parentElement, nextNode, parentView);

Where content is an actual template (e.g., Template.test), data would be your { params: params } and parentElement would be an actual element you want to render the content into - if you’re trying to replicate BlazeLayout.render - that would be something along the lines of $("#__blaze-root")[0].

The last two arguments, you probably don’t need/want to use at this level. If you were manually rendering a blaze template from inside another template (which is very rare), the last argument, parentElement would be the current view (e.g., the view of the template instance, or the view that corresponds to an {{#each}} block or similar). nextNode is where in the parent element it should be added, in the case that the parentElement already contains data.

In short - Blaze.renderWithData(Template.test, { params: params }, $("#__blaze-root")[0]) is going to get you pretty close. If you’re totally removing blaze-layout - replace the last param with the body of the page.

2 Likes