Question

我有一个经典的“Thread-＆gt; Posts”模型。在应用程序中，我有一个带有“Thread”集合的左侧边栏。当用户单击一个Thread时，我想用Thread-＆gt; Posts元素创建另一个div。

有没有办法做到这一点，保持反应性？

现在，我有了这个：

// 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;
 }

包含帖子的模板是这样的：

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

（“用户”和“文本”属性来自“thread.posts”元素）

使用此代码，我只获取刷新（F5）网页的新值（或执行'click tr'event）。我做错了什么？

谢谢！

==编辑==

好的......现在，随着Chistian Fritz的推荐，我的代码是这样的：

// 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>

变化很大（这很简单！），但反应仍然不起作用：（....

Answer 1

问题是你正在使用jQuery填充你的DOM：

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

这打破了反应链。

您只显示部分代码，因此我无法为您提供完整的解决方案，但似乎datathread模板已经在使用selectedThread会话变量 - 这很好。因此，它可能就像使用{{> datathread}}代替HTML中的#posts元素一样简单。

编辑：

您需要更改的一件事是您假设datathread的范围：如果我理解正确的话，它已经是线程本身：

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

此外，threadlist事件处理程序中的this肯定不会是线程。我不知道tr中threadlist的数据（你能展示代码吗？），但你很可能会做如下的事情：

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

对于datathread：

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

或类似。

渲染使用Meteor动态创建的新div

1 个答案: