【问题标题】:return data from two collections with data:function in iron:router Meteor从两个集合中返回数据,其中包含 data:function in iron:router Meteor
【发布时间】:2016-03-18 19:27:24
【问题描述】:

不使用 publish 或 waitOn 或其他高级技术用于学习目的。不知怎的,我无法让它工作。

Router.route('/browse/:_id', function(){
            this.render('navigation', {to: 'navbar'});
            this.render('header', {to: 'header'});
            this.render('website', {
              to: 'main',
              data: function(){
                return {
                    websites: Websites.findOne({_id: this.params._id}),
                    comments: Comments.find({siteId: this.params._id})
                   }
              }
            });
        });

此代码适用于“cmets”,而“网站”无法呈现。
只有当我这样返回时,“网站”下的字段才会呈现为 HTML:

data: function(){   /*This works for websites but if used on comments it won't*/
         return Websites.findOne({_id: this.params._id})
       } 

而对于“cmets”,它仅在我以对象表示法或键值对给出时才有效:

data: function(){   /*This works for comments but if used on websites it wont*/
                return {comments: Comments.find({siteId: this.params._id})}
              }

我的问题是我需要从同一个模板中的两个集合中获取数据。非常欢迎任何建议。谢谢!

编辑还包括我的 HTML 模板:“网站”模板

<template name="website">
<div class="container">
    /*solved by including #with websites here*/
    <div class="website">
        <div class="website-header js-url">
            <h4>{{title}}</h4>
        </div>
        <div class="website-body">
            <tr><td>URL:</td> <td>{{url}}</td></tr>
            <tr><td>Description</td><td>{{description}}</td></tr>

            <div class="votes">
                <div class="upvote_row">
                    <tr>
                        <td>Up Votes:</td>
                        <td>{{upVote.length}}<a href="#" class="btn btn-default js-upvote"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></a></td>
                    </tr>
                </div>
                <div class="downvote_row">
                    <tr>
                        <td>Down Votes:</td>
                        <td>{{downVote.length}}<a href="#" class="btn btn-default js-downvote"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></a></td>
                    </tr>
                </div>
            </div>

            <tr><td>Posted By:</td><td><a href class="">{{createdBy}}</a> on {{createdOn.toDateString}} at {{createdOn.toLocaleTimeString}} </td></tr>              
        </div>
    </div>
    /* /with */
    <div class="comments">
        <h5>Comment Section</h5>
        {{#if currentUser}}
        <a class="btn btn-default js-toggle-comment-form" href>
            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        </a>
        {{/if}} 
        <div id="comment_form" class="hidden_div">
            <form class="js-save-comment-form">
              <div class="form-group">
                <label for="user_comment">Add Comment</label>
                <input type="textfield" class="form-control" id="user_comment" placeholder="Your views on this website" required>
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
              <button class="btn btn-default js-cancel-submit">Cancel</button>
            </form>
        </div>

        <ol>
        {{#each comments}}
        {{>comment_item}}
        {{/each}}
        </ol>
    </div>

 </div>
</template>

然后我的评论模板完美无缺。

<template name="comment_item">
    <li class="card-panel teal darken-1 comments">

        <blockquote>
            <p class='card-content'>
                {{userComment}}
            </p>
            <footer>
                <a href="{{url}}">{{postedBy}}</a> on {{postedOn.toDateString}} at {{postedOn.toLocaleTimeString}}
                <a href="#" class="btn btn-default js-upvote">
                    <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                    <span class="badge badge-notify">{{upVote.length}}</span>
                </a>
                <a href="#" class="btn btn-default js-downvote">
                    <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
                    <span class="badge badge-notify">{{downVote.length}}</span>
                </a>
             </footer>
        </blockquote>
    </li>
</template>

【问题讨论】:

  • 两件事:1.) 我会尝试使用一个模板,其导航、页眉、页脚等都包含在模板中,然后渲染一个模板。 2.) 我不知道它为什么会这样,但它可能与 findOne() 将返回一个对象而 find() 将返回一个游标这一事实有关。尝试使用 find().fetch() 代替吗?

标签: javascript meteor iron-router


【解决方案1】:

您还应该显示您的 HTML 模板代码。我怀疑您是在直接引用网站对象的键,而不是使用 {{websites.keyname}}。根据您的数据函数,您的数据上下文将为 {websites: an object, comments: a cursor} 如果您尝试从您的网站访问 {{keyname}},您将一无所获,因为您的数据上下文没有名为 keyname 的顶级键。

【讨论】:

  • 嗨,我们如何设置keyname?你是对的,这与我从模板中引用 websites 上的键的方式有关。我昨天已经用与上面相同的代码(第一个同时打开)解决了它,在我包含 {{with website}} 之后,我开始引用来自websites 的键
  • keyname 就是您在websites 文档中拥有的任何顶级密钥。如果有一个名为foo 的顶级密钥,那么您可以使用{{websites.foo}} 来引用它
猜你喜欢
  • 1970-01-01
  • 2021-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-08
  • 1970-01-01
  • 2018-02-12
  • 2023-03-16
相关资源
最近更新 更多