javascript 获取已渲染的 Mongo 字段的值 - Meteor

Question

大家好，非常感谢你们的帮助。根据评论中的建议编辑问题。

我是 Mongo 和 Meteor 的新手。

我有一个集合“posts”，其中包含一个字段“slug”。

“帖子”模板已正确填充每个帖子的值。 Slug 值始终类似于“my-great-post”。

我需要获取 _id 的 slug 的文本值，每次访问模板时该文本值都会不同，对其进行编码，写入字符串，然后将字符串吐回到模板中。

尝试过的事情

• 即使定义了集合并在模板中正确填充了空格键值，也无法在模板助手或 onRendered 中返回“this.slug”或“this.data.slug”的值

• “this”将“[object Object]”返回到 console.log

• 当我尝试使用 javascript 编码并从帮助程序传递字符串时，应用程序崩溃，可能我没有完全理解文档中的帮助程序语法

(我遵循了评论中的建议，以避免尝试在模板 html 中创建脚本，因此下面是帮助此线程的每个人请求的更多信息)

- 模板 html-

{{#with post}}

<div class="blog-article">
  <div class="blog-header">
    <div class="left">

      <!-- title -->
      <h1 class="post-title">{{title}}</h1>

      <div class="holder">
        <div class="post-tags">
          <!-- tags -->
           {{#each tags}}
              <span>{{this}}</span>
           {{/each}}
        </div>
      </div>

    </div>

  </div> 

  <div class="blog-post">
    <div class="blog-copy">

      <!-- date -->
      <div class="post-date">{{post_date}}</div>

      <!-- social -->  
      <div class="blog-social">
         <!-- 
               <a class="so-facebook" target="_blank" href="need to encode slug here"></a>
         -->       
       </div>

       <!-- ============== post ============== -->

       {{{content}}}

       <!-- ============ end post ============ -->

     </div>
  </div>
</div>

{{/with}}

- 模板 js -

Template.post.onCreated(function() {
  var self = this;
  self.autorun(function() {
    var postSlug = FlowRouter.getParam('postSlug');
    self.subscribe('singlePost', postSlug);  
  });
});

Template.post.helpers({

  post: function() {
    var postSlug = FlowRouter.getParam('postSlug');
    var post = Posts.findOne({slug: postSlug}) || {};
    return post;
  } 

   // can't get these working in a helper, out of helper they crash the app 
   // console.log(this.slug);   
   // console.log(this.data.slug);

});

Template.post.onRendered( function () {

   // these do not work 
   // console.log(this.slug);   
   // console.log(this.data.slug);

}); 

db.posts.findOne();

{
  "_id" : ObjectId("576c95708056bea3bc25a91f"),
  "title" : "How Meteor Raised the Bar For New Rapid-Development Technologies",
  "post_date" : "May 28, 2016",
  "image" : "meteor-raised-the-bar.png",
  "slug" : "how-meteor-raised-the-bar",
  "bitlink" : "ufw-29Z9h7s",
  "tags" : [
    "Tools",
    "Technologies"
           ],
  "excerpt" : "sizzling excerpt",
  "content" : "bunch of post content html"
}

如果有人可以使用任何方法解决这个问题，我将怀着最强烈的喜悦和感激之情接受答案。

Answer 1

问题可能出在父模板上，而不是这个模板上。 Meteor 的工作方式是 JS 文件与 HTML 分离，因此不要尝试包含 <script> HTML 中的标记。

第一件事是您必须将所有文档加载到客户端中。 (注意:一旦掌握了窍门，您就可以只加载您需要的文档了)。

为此，您需要一个集合和一个出版物。默认情况下，所有集合都会自动完全发布，因此除非您删除了自动发布模块，否则我将假设它仍然已加载。

那么让我们从父模板开始。在本例中，我将循环遍历集合中的所有帖子并使用 innerTemplate 显示它们。

<template name=parent>
  <ul>
  {{#each post}}
    {{> innerTemplate}}
  {{/each}}
  </ul>
</template>

现在我们的内部模板可能如下所示:

<template name=innerTemplate>
  <li>{{slug}}</li>
</template>

最终结果将是一个包含每个 slug 的简单列表。

现在，为了将所有内容链接在一起，我们需要创建一个 JS 文件，该文件将:1.在客户端和服务器端定义集合2.将集合传递给父模板

客户端和服务器都应该可以访问此文件。

posts = new Mongo.Collection('posts');

if(Meteor.isClient) {
  Template.parent.helpers({
    posts() {
      return Posts.find();
    }
  });
}

现在，如果你想在 JS 文件中使用“slug”做一些事情，你可以这样做:

if(Meteor.isClient) {
  Template.innerTemplate.helpers({
    upperCaseSlug() {
      return this.slug.toUpperCase();
    }
  });
}

那么，您可以引用upperCaseSlug在您的模板中，如下所示:

<template name=innerTemplate>
  <li>{{upperCaseSlug}}</li>
</template>