CODEWITHSUNDEEP
node.jsmeteor
Imaky
Imaky

Reputation: 1257

Rendering new div created dynamically with Meteor

I have a the classic "Thread->Posts" model. In the application, I have a left sidebar with the "Thread" collections. When the user click in a Thread, I want to create another div with the Thread->Posts elements.

Is there any way to do this, conservating the reactivity?

For now, I've got this:

// In the client
   Template.threadlist.events({
        'click tr': function(event){
            Session.set("selectedThread",this);
            $("#posts").html( Meteor.render(Template["datathread"]) );
        }
   })

    [...]


    Template.datathread.events({
        'click input.add-post' : function(event){
            var t = Session.get("selectedThread");
            Meteor.call("addPost", {"thread":t,"text":"foo","user":"var"},callback})
        }
    })
   [...] 
   // In the server

   addPost: function(param){
    var id = Threads.update(param.thread,{ $addToSet: {"posts": {"text":param.text, "user": param.user}}});
    return id;
 }

The template with the posts is something like this:

<template name="datathread">
{{#each thread.posts}}
    {{user}} says: {{text}}
    <br />
{{/each}}
</template>

(The "user" and "text" propertis are from the "thread.posts" elements)

With this code, I only get the new values refreshing (F5) the webpage (or executing the 'click tr'event). What I'm doing wrong?

Thank you!

== Edit ==

Ok... Now, with the recomendation of Chistian Fritz, my code its something like this:

// In the client
Template.datathread.thread = function(){
    return Session.get("selectedThread");
}

[...]

Template.threadlist.events({
    'click tr': function(event){
        Session.set("selectedThread",this);
     }
});


//In the html  
<div class="span5" id="threads">
    {{> datathread}}
</div>

<template name="datathread">
    {{#if thread}}
        <hr />
        {{#each thread.posts}}
            {{user}} says: {{text}}
            <br />
        {{/each}}
    {{/if}}
</template>

The changes are great (it's so simple!), but the reactivity still doesn't work :(....

Upvotes: 0

Views: 424

Answers (1)

Christian Fritz
Christian Fritz

Reputation: 21364

The problem is that you are using jQuery to fill your DOM:

$("#posts").html( Meteor.render(Template["datathread"]) );

This breaks the reactivity chain.

You are only showing part of your code, so I can't give you the full solution, but it seems that the datathread template is already using the selectedThread session variable -- which is good. Hence, it might be as easy as using {{> datathread}} in place of the #posts element in your HTML.

EDIT:

One thing that you need to change is the scope you are assuming datathread: it's already the thread itself, if I understand correctly:

<template name="datathread">
     <hr />
     {{#each posts}}
         {{user}} says: {{text}}
         <br />
     {{/each}}
</template>

Also, the this in the threadlist event handler most certainly won't be the thread. I don't know the data of the tr in the threadlist (can you show that code?), but you will most probably do something like the following:

Session.set("selectedThread", this.id);

And for datathread:

Template.datathread.thread = function(){
    return Threads.find({_id: Session.get("selectedThread")});
}

or similar.

Upvotes: 2

Related Questions