How Do I Properly Make a Meteor Template Reactive?

StackOverflow https://stackoverflow.com/questions/17224377

  •  01-06-2022
  •  | 
  •  

Domanda

My app displays a collection of items and I'd like to add an item drilldown view.

I've only been able to get half of the solution working; I find the appropriate document and use that document to render the template:

var item = Items.findOne('my_id');

$('#main').html(
    Meteor.render(function () {
        return Templates.item(item)
    }));

This renders the individual item successfully and the appropriate events are bound.

Here's the rub, the template isn't reactive! If I change its data using the associated event handlers or from the console, the template isn't updated. However, a page refresh will reveal the updated data.

I'm a Meteor noobie, so it's probably something very simple. Any help would be greatly appreciated.

È stato utile?

Soluzione

It seems to me that you aren't using the templates in they way they were really intended to be.

A meteor app starts with the main html markup which can only exist once in your app..

<head>
  <title>My New Fancy App</title>
</head>
<body>
  {{>templateName}}
</body>

Then you add a template..

<template name="templateName">
  {{#each items}}
    template or relevant html goes here..
  {{/each}}
</template>

Now you need a template helper to give you data for your {{#each items}} block helper..

Template.templateName.helpers({
  items: function(){ return Items.find({}) }
});

All this gets defined on the client side..

Then you'll need a collection and the collection should be defined on both the client and server.

Items = new Meteor.Collection('items');

This should now work as long as you have records in your collection.

Since you wish to only wish to render a single document you can change the helper and template just slightly..

first the helper becomes:

Template.templateName.helpers({
  item: function(){ return Items.findOne() }
});

Then the template can reference the values of the returned document through document, so we change our template to:

<template name="templateName">
  {{item.propertyName}}
</template>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top