How Do I Properly Make a Meteor Template Reactive?

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

  •  01-06-2022
  •  | 
  •  

سؤال

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.

هل كانت مفيدة؟

المحلول

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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top