Tuesday 15 May 2012

javascript - How Do I Properly Make a Meteor Template Reactive? -


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

Only me is able to work half the solution; I am getting the appropriate documents and use that document to render the template:

  var item = Items.findOne ('my_id'); $ ('#team'). Html (Meteor.render (function () {Templates.item {item}}));   

It successfully presents individual items and appropriate events are bound.

Rubbing here, the template is not responsive ! If I change my data with related event handlers or consoles, the template has not been updated. However, a page refresh update will reveal the data.

I am a meteor noob, so maybe it is very easy any help would be greatly appreciated.

It seems that you are not using templates the way they really intended .

A meteor app starts with the main HTML markup, which can only be present in your app at once.

  & lt; Head & gt; & Lt; Title & gt; My new fancy app & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; {{& Gt; Template name}} & lt; / Body & gt;   

Then you add a template ..

  & lt; Template name = "templateName" & gt; {{#each item}} template or contextual HTML goes here. {{/ Every}} & lt; / Template & gt;   

Now you need a template assistant to provide data for your block {{# items}}.

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

All this is defined on the client side ..

Then you will need the archive and the collection should be defined on both the client and the server.

  items = new meteor. Compilation ('item');   

As long as you have a record in your archive, you should work.

Since you want to present only one document, you can change the assistant and the template already, it is helpful:

  Template.templateName.helpers ({ Item: function () {return item.findone ()}});   

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

  & lt ; Template name = "templateName" & gt; {{Item.propertyName}} & lt; / Template & gt;    

No comments:

Post a Comment